diff --git "a/static/js/script.js" "b/static/js/script.js"
new file mode 100644--- /dev/null
+++ "b/static/js/script.js"
@@ -0,0 +1,2867 @@
+// Research Radar - Enhanced Interactive JavaScript
+class ResearchRadar {
+ constructor() {
+ this.currentSection = 'search';
+ this.currentPage = 'landing';
+ this.isLoading = false;
+ this.chatHistory = [];
+ this.currentDocumentId = null;
+ this.uploadProgress = 0;
+ this.searchCache = new Map();
+
+ this.init();
+ }
+
+ init() {
+ this.setupEventListeners();
+ this.setupDragAndDrop();
+ this.initializeChat();
+ this.setupChatInput();
+ this.setupSearchSuggestions();
+ this.updateStatusIndicator();
+ this.setupPageNavigation();
+ this.setupEnhancedChat();
+ this.setupMobileNav();
+ this.setupVhUnit();
+ }
+
+ setupEventListeners() {
+ console.log('Setting up event listeners...');
+
+ // Landing page CTA buttons - Critical buttons that need to work
+ this.setupLandingPageButtons();
+
+ // Navigation for app page
+ const navLinks = document.querySelectorAll('.app-nav .nav-link');
+ console.log(`Found ${navLinks.length} navigation links`);
+ navLinks.forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ const section = link.dataset.section;
+ console.log(`Navigation clicked: ${section}`);
+ if (section) {
+ this.switchSection(section);
+ }
+ });
+ });
+
+ // Quick search cards
+ const quickSearchCards = document.querySelectorAll('.quick-search-card');
+ console.log(`Found ${quickSearchCards.length} quick search cards`);
+ quickSearchCards.forEach(card => {
+ card.addEventListener('click', (e) => {
+ const query = card.dataset.query;
+ console.log(`Quick search card clicked: ${query}`);
+ if (query) {
+ const searchInput = document.getElementById('searchInput');
+ if (searchInput) {
+ searchInput.value = query;
+ this.searchPapers();
+ }
+ }
+ });
+ });
+
+ // Chat suggestions
+ document.querySelectorAll('.suggestion-chip').forEach(chip => {
+ chip.addEventListener('click', (e) => {
+ const question = chip.dataset.question;
+ if (question) {
+ document.getElementById('chatInput').value = question;
+ this.sendChatMessage();
+ }
+ });
+ });
+
+ // Example URLs
+ document.querySelectorAll('.example-url').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const url = btn.dataset.url;
+ if (url) {
+ document.getElementById('paperUrl').value = url;
+ }
+ });
+ });
+
+ // Clear chat button
+ const clearBtn = document.getElementById('chatClearBtn');
+ if (clearBtn) {
+ clearBtn.addEventListener('click', () => this.clearChat());
+ }
+
+ // Search functionality
+ const searchBtn = document.getElementById('searchBtn');
+ const searchInput = document.getElementById('searchInput');
+
+ console.log('Search button found:', !!searchBtn);
+ console.log('Search input found:', !!searchInput);
+
+ if (searchBtn) {
+ searchBtn.addEventListener('click', () => {
+ console.log('Search button clicked!');
+ this.searchPapers();
+ });
+ }
+
+ if (searchInput) {
+ searchInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ console.log('Search input Enter pressed!');
+ this.searchPapers();
+ }
+ });
+ }
+
+ // File upload
+ const fileInput = document.getElementById('fileInput');
+ console.log('File input found:', !!fileInput);
+ if (fileInput) {
+ fileInput.addEventListener('change', (e) => {
+ console.log('File input changed!');
+ this.handleFileUpload(e);
+ });
+ }
+
+ // URL analysis
+ const analyzeUrlBtn = document.getElementById('analyzeUrlBtn');
+ const paperUrlInput = document.getElementById('paperUrl');
+
+ console.log('Analyze URL button found:', !!analyzeUrlBtn);
+ console.log('Paper URL input found:', !!paperUrlInput);
+
+ if (analyzeUrlBtn) {
+ analyzeUrlBtn.addEventListener('click', () => {
+ console.log('Analyze URL button clicked!');
+ this.analyzePaperUrl();
+ });
+ }
+
+ if (paperUrlInput) {
+ paperUrlInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ console.log('Paper URL input Enter pressed!');
+ this.analyzePaperUrl();
+ }
+ });
+ }
+
+ // Chat functionality
+ const chatSendBtn = document.getElementById('chatSendBtn');
+ const chatInput = document.getElementById('chatInput');
+ const chatSendBtnPanel = document.getElementById('chatSendBtnPanel');
+ const chatInputPanel = document.getElementById('chatInputPanel');
+
+ if (chatSendBtn) {
+ chatSendBtn.addEventListener('click', () => this.sendChatMessage());
+ }
+
+ if (chatInput) {
+ chatInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ this.sendChatMessage();
+ }
+ });
+ }
+
+ // Panel chat functionality
+ if (chatSendBtnPanel) {
+ chatSendBtnPanel.addEventListener('click', () => this.sendChatMessagePanel());
+ }
+
+ if (chatInputPanel) {
+ chatInputPanel.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ this.sendChatMessagePanel();
+ }
+ });
+ }
+ }
+
+ setupLandingPageButtons() {
+ console.log('Setting up landing page buttons...');
+
+ // Get Started button (nav)
+ const getStartedBtn = document.querySelector('.nav-cta-btn');
+ console.log('Get Started button found:', !!getStartedBtn);
+ if (getStartedBtn) {
+ // Remove existing onclick to prevent conflicts
+ getStartedBtn.removeAttribute('onclick');
+ getStartedBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ console.log('Get Started button clicked!');
+ this.navigateToApp('search');
+ });
+ }
+
+ // Start Exploring button
+ const startExploringBtn = document.querySelector('.cta-button.primary');
+ console.log('Start Exploring button found:', !!startExploringBtn);
+ if (startExploringBtn) {
+ // Remove existing onclick to prevent conflicts
+ startExploringBtn.removeAttribute('onclick');
+ startExploringBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ console.log('Start Exploring button clicked!');
+ this.navigateToApp('search');
+ });
+ }
+
+ // Upload Paper button
+ const uploadPaperBtn = document.querySelector('.cta-button.secondary');
+ console.log('Upload Paper button found:', !!uploadPaperBtn);
+ if (uploadPaperBtn) {
+ // Remove existing onclick to prevent conflicts
+ uploadPaperBtn.removeAttribute('onclick');
+ uploadPaperBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ console.log('Upload Paper button clicked!');
+ this.navigateToApp('upload');
+ });
+ }
+
+ // Back to Landing button
+ const backToLandingBtn = document.querySelector('.back-to-landing');
+ console.log('Back to Landing button found:', !!backToLandingBtn);
+ if (backToLandingBtn) {
+ // Remove existing onclick to prevent conflicts
+ backToLandingBtn.removeAttribute('onclick');
+ backToLandingBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ console.log('Back to Landing button clicked!');
+ this.navigateToLanding();
+ });
+ }
+
+ // Brand logo that navigates to landing
+ const brandLogo = document.querySelector('.app-nav .nav-brand');
+ console.log('Brand logo found:', !!brandLogo);
+ if (brandLogo) {
+ // Remove existing onclick to prevent conflicts
+ brandLogo.removeAttribute('onclick');
+ brandLogo.addEventListener('click', (e) => {
+ e.preventDefault();
+ console.log('Brand logo clicked!');
+ this.navigateToLanding();
+ });
+ }
+ }
+
+ setupDragAndDrop() {
+ const uploadZone = document.getElementById('uploadZone');
+ if (!uploadZone) return;
+
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+ uploadZone.addEventListener(eventName, this.preventDefaults, false);
+ });
+
+ ['dragenter', 'dragover'].forEach(eventName => {
+ uploadZone.addEventListener(eventName, () => {
+ uploadZone.classList.add('drag-over');
+ }, false);
+ });
+
+ ['dragleave', 'drop'].forEach(eventName => {
+ uploadZone.addEventListener(eventName, () => {
+ uploadZone.classList.remove('drag-over');
+ }, false);
+ });
+
+ uploadZone.addEventListener('drop', (e) => {
+ const files = e.dataTransfer.files;
+ if (files.length > 0) {
+ this.processFile(files[0]);
+ }
+ }, false);
+ }
+
+ preventDefaults(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ switchSection(sectionName) {
+ // Update navigation
+ document.querySelectorAll('.nav-link').forEach(link => {
+ link.classList.remove('active');
+ });
+
+ document.querySelector(`[data-section="${sectionName}"]`).classList.add('active');
+
+ // Update sections
+ document.querySelectorAll('.section').forEach(section => {
+ section.classList.remove('active');
+ });
+
+ document.getElementById(sectionName).classList.add('active');
+
+ this.currentSection = sectionName;
+ }
+
+ showLoading(show = true) {
+ const overlay = document.getElementById('loadingOverlay');
+ if (overlay) {
+ if (show) {
+ overlay.classList.add('active');
+ this.isLoading = true;
+ } else {
+ overlay.classList.remove('active');
+ this.isLoading = false;
+ }
+ }
+ }
+
+ showToast(message, type = 'info') {
+ const container = document.getElementById('toastContainer');
+ if (!container) return;
+
+ const toast = document.createElement('div');
+ toast.className = `toast ${type}`;
+ toast.innerHTML = `
+
+
+ ${message}
+
+ `;
+
+ container.appendChild(toast);
+
+ // Auto remove after 5 seconds
+ setTimeout(() => {
+ if (toast.parentNode) {
+ toast.style.animation = 'toastSlideOut 0.3s ease-out forwards';
+ setTimeout(() => {
+ container.removeChild(toast);
+ }, 300);
+ }
+ }, 5000);
+ }
+
+ getToastIcon(type) {
+ const icons = {
+ 'success': 'check-circle',
+ 'error': 'exclamation-circle',
+ 'warning': 'exclamation-triangle',
+ 'info': 'info-circle'
+ };
+ return icons[type] || 'info-circle';
+ }
+
+ async searchPapers() {
+ const searchInput = document.getElementById('searchInput');
+ const query = searchInput.value.trim();
+
+ if (!query) {
+ this.showToast('Please enter a search query', 'warning');
+ return;
+ }
+
+ this.showLoading(true);
+
+ try {
+ const response = await fetch('/search', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ query })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ this.displaySearchResults(data.papers);
+ this.showToast(`Found ${data.papers.length} papers`, 'success');
+ } else {
+ throw new Error(data.error || 'Search failed');
+ }
+ } catch (error) {
+ console.error('Search error:', error);
+ this.showToast(error.message, 'error');
+ } finally {
+ this.showLoading(false);
+ }
+ }
+
+ displaySearchResults(papers) {
+ const container = document.getElementById('searchResults');
+ if (!container) return;
+
+ // Keep papers for later access (e.g., openSummaryChat after ingest/summarize)
+ this.lastSearchResults = papers;
+
+ if (papers.length === 0) {
+ container.innerHTML = `
+
+
+
+ No papers found. Try different keywords.
+
+
+
${this.escapeHtml(paper.title)}
+
+
+ ${paper.authors.slice(0, 3).map(author => this.escapeHtml(author)).join(', ')}
+ ${paper.authors.length > 3 ? ` and ${paper.authors.length - 3} others` : ''}
+
+
+ ${paper.published}
+ ${this.escapeHtml(paper.category)}
+
+
+ ${this.truncateText(this.escapeHtml(paper.summary), 300)}
+
+
+
')
+ .replace(/\n/g, '
')
+ .replace(/\*\*(.*?)\*\*/g, '$1')
+ .replace(/\*(.*?)\*/g, '$1')
+ .replace(/^/, '
')
+ .replace(/$/, '
');
+ }
+
+ updateSummaryStats(text) {
+ const wordCount = text.split(/\s+/).length;
+ const readingTime = Math.ceil(wordCount / 200); // Average reading speed
+ const compressionRatio = Math.round((1 - (text.length / (text.length * 3))) * 100); // Estimate
+
+ const wc = document.getElementById('wordCount');
+ const rt = document.getElementById('readingTime');
+ const cr = document.getElementById('compressionRatio');
+ if (wc) wc.textContent = wordCount.toLocaleString();
+ if (rt) rt.textContent = `${readingTime} min`;
+ if (cr) cr.textContent = `${compressionRatio}%`;
+ }
+
+ setupChatPanel() {
+ const chatInput = document.getElementById('chatInputPanel');
+ const sendBtn = document.getElementById('chatSendBtnPanel');
+
+ // Clear any existing event listeners
+ const newChatInput = chatInput.cloneNode(true);
+ chatInput.parentNode.replaceChild(newChatInput, chatInput);
+
+ const newSendBtn = sendBtn.cloneNode(true);
+ sendBtn.parentNode.replaceChild(newSendBtn, sendBtn);
+
+ // Add new event listeners
+ newChatInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ this.sendChatMessagePanel();
+ }
+ });
+
+ newChatInput.addEventListener('input', () => {
+ this.autoResizeTextarea(newChatInput);
+ });
+
+ newSendBtn.addEventListener('click', () => {
+ this.sendChatMessagePanel();
+ });
+ }
+
+ sendChatMessagePanel() {
+ const chatInput = document.getElementById('chatInputPanel');
+ const message = chatInput.value.trim();
+
+ if (!message) return;
+
+ // Add user message
+ this.addChatMessagePanel(message, 'user');
+
+ // Clear input
+ chatInput.value = '';
+ this.autoResizeTextarea(chatInput);
+
+ // Show typing indicator and send to backend
+ this.showChatTypingPanel();
+ this.sendChatToBackend(message);
+ }
+
+ addChatMessagePanel(message, sender) {
+ const chatPanel = document.getElementById('chatMessagesPanel');
+
+ // Remove welcome message if it exists
+ const welcome = chatPanel.querySelector('.chat-welcome');
+ if (welcome && sender === 'user') {
+ welcome.remove();
+ }
+
+ const messageDiv = document.createElement('div');
+ messageDiv.className = `chat-message-panel ${sender}`;
+
+ const currentTime = new Date().toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ messageDiv.innerHTML = `
+
+
+
+
+
+ ${sender === 'bot' ? message : this.escapeHtml(message)}
+
+
${currentTime}
+
+
+
+
+ `;
+
+ chatPanel.appendChild(typingDiv);
+ chatPanel.scrollTop = chatPanel.scrollHeight;
+ }
+
+ hideChatTypingPanel() {
+ const typingIndicator = document.getElementById('typingIndicatorPanel');
+ if (typingIndicator) {
+ typingIndicator.remove();
+ }
+ }
+
+ sendChatToBackend(message) {
+ fetch('/chat', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ message: message })
+ })
+ .then(response => response.json())
+ .then(data => {
+ this.hideChatTypingPanel();
+
+ if (data.success) {
+ this.addChatMessagePanel(data.response, 'bot');
+ } else {
+ this.addChatMessagePanel(
+ `I apologize, but I encountered an error: ${data.error || 'Unknown error'}. Please try again.`,
+ 'bot'
+ );
+ }
+ })
+ .catch(error => {
+ console.error('Chat error:', error);
+ this.hideChatTypingPanel();
+ this.addChatMessagePanel(
+ 'I apologize, but I\'m having trouble connecting right now. Please check your connection and try again.',
+ 'bot'
+ );
+ });
+ }
+
+ initializeChat() {
+ this.chatHistory = [];
+ }
+
+ async sendChatMessage() {
+ // Redirect to the enhanced chat functionality
+ this.sendMessage();
+ }
+
+ addChatMessage(message, sender) {
+ // Redirect to the enhanced chat message functionality
+ this.addMessageToChat(message, sender);
+ }
+
+ // Utility functions
+ escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ truncateText(text, maxLength) {
+ if (text.length <= maxLength) return text;
+ return text.substr(0, maxLength) + '...';
+ }
+
+ // Enhanced UI Methods (Legacy - now handled by setupEnhancedChat)
+ setupChatInput() {
+ // This is now handled by the enhanced chat setup
+ this.setupEnhancedChat();
+ }
+
+ setupSearchSuggestions() {
+ const searchInput = document.getElementById('searchInput');
+ const suggestions = document.getElementById('searchSuggestions');
+
+ // Initialize enhanced search features
+ this.initializeQuickSearchCards();
+ this.initializeSearchTips();
+ this.initializeRecentSearches();
+ this.initializeAdvancedFilters();
+
+ if (searchInput && suggestions) {
+ searchInput.addEventListener('input', (e) => this.handleSearchInput(e));
+ searchInput.addEventListener('focus', () => this.showSearchSuggestions());
+ searchInput.addEventListener('blur', () => this.hideSearchSuggestions());
+
+ // Handle suggestion clicks
+ suggestions.querySelectorAll('.suggestion-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const query = item.dataset.query;
+ if (query) {
+ searchInput.value = query;
+ suggestions.classList.remove('show');
+ this.searchPapers();
+ this.addToRecentSearches(query);
+ }
+ });
+ });
+ }
+ }
+
+ initializeQuickSearchCards() {
+ const quickSearchCards = document.querySelectorAll('.quick-search-card');
+ quickSearchCards.forEach(card => {
+ card.addEventListener('click', () => {
+ const query = card.dataset.query;
+ if (query) {
+ const searchInput = document.getElementById('searchInput');
+ if (searchInput) {
+ searchInput.value = query;
+ this.searchPapers();
+ this.addToRecentSearches(query);
+ }
+ }
+ });
+ });
+ }
+
+ initializeSearchTips() {
+ const tipsToggle = document.querySelector('.tips-toggle');
+ const tipsContent = document.querySelector('.tips-content');
+
+ if (tipsToggle && tipsContent) {
+ tipsToggle.addEventListener('click', () => {
+ tipsContent.classList.toggle('show');
+ const icon = tipsToggle.querySelector('i');
+ if (icon) {
+ icon.classList.toggle('fa-chevron-down');
+ icon.classList.toggle('fa-chevron-up');
+ }
+ });
+ }
+ }
+
+ initializeRecentSearches() {
+ this.loadRecentSearches();
+ }
+
+ initializeAdvancedFilters() {
+ // Advanced filters toggle is handled by global function
+ }
+
+ handleSearchInput(e) {
+ const query = e.target.value.trim();
+
+ if (query.length > 2) {
+ this.updateSearchSuggestions(query);
+ this.showSearchSuggestions();
+ } else if (query.length === 0) {
+ this.showSearchSuggestions();
+ } else {
+ this.hideSearchSuggestions();
+ }
+ }
+
+ updateSearchSuggestions(query) {
+ const searchSuggestions = document.getElementById('searchSuggestions');
+ if (!searchSuggestions) return;
+
+ // Generate dynamic suggestions based on the query
+ const suggestions = [
+ { text: query, count: '~1.2k papers' },
+ { text: query + ' applications', count: '~800 papers' },
+ { text: query + ' algorithms', count: '~650 papers' },
+ { text: query + ' recent advances', count: '~420 papers' }
+ ];
+
+ const suggestionsSection = searchSuggestions.querySelector('.suggestions-section');
+ if (suggestionsSection) {
+ const suggestionItems = suggestions.map(s => `
+
+
+ ${s.text}
+ ${s.count}
+
+ `).join('');
+
+ suggestionsSection.innerHTML = `
+ Suggestions
+ ${suggestionItems}
+ `;
+
+ // Re-attach event listeners
+ suggestionsSection.querySelectorAll('.suggestion-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const query = item.dataset.query;
+ if (query) {
+ const searchInput = document.getElementById('searchInput');
+ if (searchInput) {
+ searchInput.value = query;
+ this.searchPapers();
+ this.hideSearchSuggestions();
+ this.addToRecentSearches(query);
+ }
+ }
+ });
+ });
+ }
+ }
+
+ showSearchSuggestions() {
+ const searchSuggestions = document.getElementById('searchSuggestions');
+ if (searchSuggestions) {
+ searchSuggestions.classList.add('show');
+ }
+ }
+
+ hideSearchSuggestions() {
+ setTimeout(() => {
+ const searchSuggestions = document.getElementById('searchSuggestions');
+ if (searchSuggestions) {
+ searchSuggestions.classList.remove('show');
+ }
+ }, 200);
+ }
+
+ addToRecentSearches(query) {
+ let recentSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
+
+ // Remove if already exists
+ recentSearches = recentSearches.filter(search => search !== query);
+
+ // Add to beginning
+ recentSearches.unshift(query);
+
+ // Keep only last 5
+ recentSearches = recentSearches.slice(0, 5);
+
+ localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
+ this.updateRecentSearchesDisplay();
+ }
+
+ loadRecentSearches() {
+ const recentSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
+ if (recentSearches.length > 0) {
+ this.updateRecentSearchesDisplay();
+ }
+ }
+
+ updateRecentSearchesDisplay() {
+ const recentSearches = JSON.parse(localStorage.getItem('recentSearches') || '[]');
+ const recentSearchesContainer = document.getElementById('recentSearches');
+ const recentSearchItems = document.getElementById('recentSearchItems');
+
+ if (recentSearches.length > 0 && recentSearchesContainer && recentSearchItems) {
+ const recentHTML = recentSearches.map(search => `
+
+
+ ${search}
+
+ `).join('');
+
+ recentSearchItems.innerHTML = recentHTML;
+ recentSearchesContainer.style.display = 'block';
+
+ // Attach event listeners
+ recentSearchItems.querySelectorAll('.suggestion-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const query = item.dataset.query;
+ if (query) {
+ const searchInput = document.getElementById('searchInput');
+ if (searchInput) {
+ searchInput.value = query;
+ this.searchPapers();
+ }
+ }
+ });
+ });
+ }
+ }
+
+ updateStatusIndicator() {
+ const indicator = document.getElementById('statusIndicator');
+ const chatStatus = document.getElementById('chatStatus');
+
+ if (indicator) {
+ const statusText = indicator.querySelector('.status-text');
+ const statusDot = indicator.querySelector('.status-dot');
+
+ if (this.currentDocumentId) {
+ statusText.textContent = 'Document Active';
+ statusDot.style.background = 'var(--success-color)';
+ } else {
+ statusText.textContent = 'Ready';
+ statusDot.style.background = 'var(--warning-color)';
+ }
+ }
+
+ if (chatStatus) {
+ const statusIndicator = chatStatus.querySelector('.status-indicator');
+ if (this.currentDocumentId) {
+ statusIndicator.classList.remove('offline');
+ statusIndicator.classList.add('online');
+ statusIndicator.querySelector('span').textContent = 'Document loaded';
+ } else {
+ statusIndicator.classList.remove('online');
+ statusIndicator.classList.add('offline');
+ statusIndicator.querySelector('span').textContent = 'No document selected';
+ }
+ }
+ }
+
+ updateUploadProgress(percentage, step) {
+ const progressContainer = document.getElementById('uploadProgress');
+ const progressFill = document.getElementById('progressFill');
+ const progressPercentage = document.getElementById('progressPercentage');
+ const progressSubtitle = document.getElementById('progressSubtitle');
+ const progressTime = document.getElementById('progressTime');
+
+ if (progressContainer && progressFill && progressPercentage) {
+ progressContainer.style.display = 'block';
+ progressFill.style.width = `${percentage}%`;
+ progressPercentage.textContent = `${percentage}%`;
+
+ // Update subtitle and time estimate
+ const subtitles = [
+ 'Preparing your document for analysis...',
+ 'Uploading your document securely...',
+ 'Extracting text and content...',
+ 'AI analyzing document structure...',
+ 'Analysis complete! Ready for questions.'
+ ];
+
+ if (progressSubtitle && step <= subtitles.length) {
+ progressSubtitle.textContent = subtitles[step - 1] || subtitles[0];
+ }
+
+ if (progressTime) {
+ if (percentage < 100) {
+ const remainingTime = Math.max(1, Math.round((100 - percentage) / 10));
+ progressTime.textContent = `~${remainingTime}s remaining`;
+ } else {
+ progressTime.textContent = 'Complete!';
+ }
+ }
+
+ // Update steps with enhanced system
+ const steps = progressContainer.querySelectorAll('.progress-step');
+ steps.forEach((stepEl, index) => {
+ const stepNumber = parseInt(stepEl.dataset.step);
+ if (stepNumber <= step) {
+ stepEl.classList.add('active');
+ } else {
+ stepEl.classList.remove('active');
+ }
+ });
+
+ if (percentage === 100) {
+ setTimeout(() => {
+ progressContainer.style.display = 'none';
+ }, 3000);
+ }
+ }
+ }
+
+ autoResizeTextarea(event) {
+ const textarea = event.target;
+ textarea.style.height = 'auto';
+ const newHeight = Math.min(textarea.scrollHeight, 120);
+ textarea.style.height = newHeight + 'px';
+ }
+
+ clearChat() {
+ const chatMessages = document.getElementById('chatMessages');
+ if (chatMessages) {
+ // Keep the welcome message
+ const welcomeMessage = chatMessages.querySelector('.welcome-message');
+ chatMessages.innerHTML = '';
+ if (welcomeMessage) {
+ chatMessages.appendChild(welcomeMessage);
+ }
+ }
+ this.chatHistory = [];
+ this.showToast('Chat cleared', 'success');
+ }
+
+ setActiveDocument(docId) {
+ this.currentDocumentId = docId;
+ this.updateStatusIndicator();
+
+ // Show chat indicator
+ const chatIndicator = document.getElementById('chatIndicator');
+ if (chatIndicator) {
+ chatIndicator.classList.add('active');
+ }
+ }
+
+ // Override the original methods to include enhanced functionality
+ async processFile(file) {
+ if (!file || !this.allowed_file(file.name)) {
+ this.showToast('Please select a valid file (PDF, TXT, or DOCX)', 'error');
+ return;
+ }
+
+ const formData = new FormData();
+ formData.append('file', file);
+
+ this.showLoading(true);
+ this.updateUploadProgress(25, 1);
+
+ try {
+ this.updateUploadProgress(50, 2);
+
+ const response = await fetch('/upload', {
+ method: 'POST',
+ body: formData
+ });
+
+ this.updateUploadProgress(75, 3);
+
+ const data = await response.json();
+
+ if (response.ok) {
+ this.updateUploadProgress(100, 4);
+ this.displayUploadResult(data);
+ this.setActiveDocument(data.doc_id);
+ this.showToast('File uploaded and analyzed successfully!', 'success');
+ } else {
+ throw new Error(data.error || 'Upload failed');
+ }
+ } catch (error) {
+ console.error('Upload error:', error);
+ this.showToast(error.message, 'error');
+ this.updateUploadProgress(0, 0);
+ } finally {
+ this.showLoading(false);
+ }
+ }
+
+ allowed_file(filename) {
+ const allowedExtensions = ['pdf', 'txt', 'docx'];
+ const extension = filename.split('.').pop().toLowerCase();
+ return allowedExtensions.includes(extension);
+ }
+
+ // Page Navigation Methods
+ setupPageNavigation() {
+ // Handle smooth scrolling for landing page links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target && target.closest('#landingPage')) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+ }
+
+ setupMobileNav() {
+ // Toggle landing nav links
+ document.querySelectorAll('.navbar .mobile-nav-toggle').forEach(toggle => {
+ toggle.addEventListener('click', () => {
+ const container = toggle.closest('.navbar').querySelector('.landing-nav-links, .nav-links');
+ if (container) {
+ container.classList.toggle('show');
+ }
+ });
+ });
+ // Close menu on link click (mobile)
+ document.querySelectorAll('.landing-nav-links .nav-link').forEach(link => {
+ link.addEventListener('click', () => {
+ const links = document.querySelector('.landing-nav-links');
+ links && links.classList.remove('show');
+ });
+ });
+ }
+
+ setupVhUnit() {
+ const setVh = () => {
+ const vh = window.innerHeight * 0.01;
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
+ };
+ setVh();
+ window.addEventListener('resize', setVh);
+ window.addEventListener('orientationchange', setVh);
+ }
+
+ // Removed split-mode; tabs-only behavior
+ setupViewToggle() {
+ // Strict tabs: only one panel visible
+ document.querySelectorAll('.tab-btn').forEach(btn => {
+ btn.classList.remove('active');
+ });
+ document.querySelectorAll('.tab-content').forEach(content => {
+ content.classList.remove('active');
+ });
+ document.querySelector(`[data-tab="summary"]`)?.classList.add('active');
+ document.getElementById('summary-tab')?.classList.add('active');
+ history.replaceState(null, null, `#summary`);
+ const tabDisplayName = 'Summary';
+ showToast(`Focused ${tabDisplayName}`, 'info');
+ }
+
+ navigateToApp(section = 'search') {
+ // Hide landing page
+ const landingPage = document.getElementById('landingPage');
+ const appPage = document.getElementById('appPage');
+
+ if (landingPage && appPage) {
+ landingPage.classList.remove('active');
+ appPage.classList.add('active');
+
+ this.currentPage = 'app';
+
+ // Switch to the specified section
+ this.switchSection(section);
+
+ // Show toast message
+ this.showToast(`Welcome to Research Radar! ${section === 'search' ? 'Start searching for papers' : 'Upload your documents'}`, 'success');
+
+ // Focus on the relevant input
+ setTimeout(() => {
+ if (section === 'search') {
+ const searchInput = document.getElementById('searchInput');
+ if (searchInput) searchInput.focus();
+ } else if (section === 'upload') {
+ // Auto-focus on upload section
+ document.getElementById('upload').scrollIntoView({ behavior: 'smooth' });
+ }
+ }, 500);
+ }
+ }
+
+ navigateToLanding() {
+ const landingPage = document.getElementById('landingPage');
+ const appPage = document.getElementById('appPage');
+
+ if (landingPage && appPage) {
+ appPage.classList.remove('active');
+ landingPage.classList.add('active');
+
+ this.currentPage = 'landing';
+
+ // Scroll to top
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+
+ this.showToast('Welcome back to the homepage!', 'info');
+ }
+ }
+
+ // Enhanced section switching for app page
+ switchSection(sectionName) {
+ if (this.currentPage !== 'app') return;
+
+ // Update navigation
+ document.querySelectorAll('.app-nav .nav-link').forEach(link => {
+ link.classList.remove('active');
+ });
+
+ const activeLink = document.querySelector(`.app-nav [data-section="${sectionName}"]`);
+ if (activeLink) {
+ activeLink.classList.add('active');
+ }
+
+ // Update sections
+ document.querySelectorAll('#appPage .section').forEach(section => {
+ section.classList.remove('active');
+ });
+
+ const targetSection = document.getElementById(sectionName);
+ if (targetSection) {
+ targetSection.classList.add('active');
+ }
+
+ this.currentSection = sectionName;
+
+ // Add section-specific functionality
+ this.onSectionChange(sectionName);
+ }
+
+ onSectionChange(sectionName) {
+ switch(sectionName) {
+ case 'search':
+ // Focus search input after animation
+ setTimeout(() => {
+ const searchInput = document.getElementById('searchInput');
+ if (searchInput) searchInput.focus();
+ }, 300);
+ break;
+ case 'upload':
+ // Reset upload progress
+ this.updateUploadProgress(0, 0);
+ break;
+ case 'mypapers':
+ // Load papers when section is accessed
+ this.loadMyPapers();
+ break;
+ case 'chat':
+ // Focus chat input
+ setTimeout(() => {
+ const chatInput = document.getElementById('chatInput');
+ if (chatInput) chatInput.focus();
+ }, 300);
+ break;
+ }
+ }
+
+ // Enhanced Chat Functionality
+ setupEnhancedChat() {
+ this.messageCount = 0;
+ this.sessionStartTime = Date.now();
+ this.updateChatStats();
+ this.setupChatSuggestions();
+ this.setupChatInput();
+ this.setupQuickActions();
+ this.startSessionTimer();
+ }
+
+ setupChatSuggestions() {
+ // Handle suggestion chips
+ document.querySelectorAll('.suggestion-chip-enhanced').forEach(chip => {
+ chip.addEventListener('click', (e) => {
+ const question = e.currentTarget.dataset.question;
+ if (question) {
+ const chatInput = document.getElementById('chatInput');
+ chatInput.value = question;
+ chatInput.focus();
+ this.autoResizeTextarea(chatInput);
+ }
+ });
+ });
+ }
+
+ setupChatInput() {
+ const chatInput = document.getElementById('chatInput');
+ const sendBtn = document.getElementById('chatSendBtn');
+ const clearBtn = document.getElementById('chatClearBtn');
+
+ // Auto-resize textarea
+ chatInput.addEventListener('input', () => {
+ this.autoResizeTextarea(chatInput);
+ });
+
+ // Handle Enter key
+ chatInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ this.sendMessage();
+ } else if (e.key === 'Enter' && e.shiftKey) {
+ // Allow new line
+ }
+ });
+
+ // Send button
+ sendBtn.addEventListener('click', () => {
+ this.sendMessage();
+ });
+
+ // Clear chat
+ clearBtn.addEventListener('click', () => {
+ this.clearChat();
+ });
+
+ // Attach button (placeholder)
+ document.getElementById('attachBtn')?.addEventListener('click', () => {
+ this.showNotification('File attachment coming soon!', 'info');
+ });
+
+ // Emoji button (placeholder)
+ document.getElementById('emojiBtn')?.addEventListener('click', () => {
+ this.showNotification('Emoji picker coming soon!', 'info');
+ });
+ }
+
+ setupQuickActions() {
+ // Quick action buttons in status card
+ document.querySelectorAll('.quick-action-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ });
+ });
+ }
+
+ autoResizeTextarea(textarea) {
+ textarea.style.height = 'auto';
+ textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+ }
+
+ sendMessage() {
+ const chatInput = document.getElementById('chatInput');
+ const message = chatInput.value.trim();
+
+ if (!message) return;
+
+ // Add user message to chat
+ this.addMessageToChat(message, 'user');
+
+ // Clear input
+ chatInput.value = '';
+ this.autoResizeTextarea(chatInput);
+
+ // Show typing indicator
+ this.showTypingIndicator();
+
+ // Update stats
+ this.messageCount++;
+ this.updateChatStats();
+
+ // Send to backend
+ this.sendChatMessage(message);
+ }
+
+ addMessageToChat(message, sender = 'user') {
+ const chatMessages = document.getElementById('chatMessages');
+ const messageDiv = document.createElement('div');
+
+ const currentTime = new Date().toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ if (sender === 'user') {
+ messageDiv.className = 'chat-message user-message';
+ messageDiv.innerHTML = `
+
+
+
+
+
${this.escapeHtml(message)}
+
+
+
+
+
+
+
+
👋 Welcome back to Research Radar!
+
Chat cleared. I'm ready to help you with your research questions.
+
+
+
+
')
+ .replace(/\n/g, '
')
+ .replace(/\*\*(.*?)\*\*/g, '$1')
+ .replace(/\*(.*?)\*/g, '$1')
+ .replace(/^/, '
')
+ .replace(/$/, '
');
+ }
+
+ updateSummaryStats(text) {
+ const wordCount = text.split(/\s+/).length;
+ const readingTime = Math.ceil(wordCount / 200); // Average reading speed
+ const compressionRatio = Math.round((1 - (text.length / (text.length * 3))) * 100); // Estimate
+
+ const wc = document.getElementById('wordCount');
+ const rt = document.getElementById('readingTime');
+ const cr = document.getElementById('compressionRatio');
+ if (wc) wc.textContent = wordCount.toLocaleString();
+ if (rt) rt.textContent = `${readingTime} min`;
+ if (cr) cr.textContent = `${compressionRatio}%`;
+ }
+
+ setupChatPanel() {
+ const chatInput = document.getElementById('chatInputPanel');
+ const sendBtn = document.getElementById('chatSendBtnPanel');
+
+ if (!chatInput || !sendBtn) return;
+
+ // Clear any existing event listeners by cloning
+ const newChatInput = chatInput.cloneNode(true);
+ chatInput.parentNode.replaceChild(newChatInput, chatInput);
+
+ const newSendBtn = sendBtn.cloneNode(true);
+ sendBtn.parentNode.replaceChild(newSendBtn, sendBtn);
+
+ // Add new event listeners
+ newChatInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ this.sendChatMessagePanel();
+ }
+ });
+
+ newChatInput.addEventListener('input', () => {
+ this.autoResizeTextarea(newChatInput);
+ });
+
+ newSendBtn.addEventListener('click', () => {
+ this.sendChatMessagePanel();
+ });
+ }
+
+ sendChatMessagePanel() {
+ const chatInput = document.getElementById('chatInputPanel');
+ const message = chatInput.value.trim();
+
+ if (!message) return;
+
+ // Add user message
+ this.addChatMessagePanel(message, 'user');
+
+ // Clear input
+ chatInput.value = '';
+ this.autoResizeTextarea(chatInput);
+
+ // Show typing indicator and send to backend
+ this.showChatTypingPanel();
+ this.sendChatToBackend(message);
+ }
+
+ addChatMessagePanel(message, sender) {
+ const chatPanel = document.getElementById('chatMessagesPanel');
+
+ // Remove welcome message if it exists
+ const welcome = chatPanel.querySelector('.chat-welcome');
+ if (welcome && sender === 'user') {
+ welcome.remove();
+ }
+
+ const messageDiv = document.createElement('div');
+ messageDiv.className = `chat-message-panel ${sender}`;
+
+ const currentTime = new Date().toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+
+ messageDiv.innerHTML = `
+
+
+
+
+
+ ${sender === 'bot' ? message : this.escapeHtml(message)}
+
+
${currentTime}
+
+
+
+
+ `;
+
+ chatPanel.appendChild(typingDiv);
+ chatPanel.scrollTop = chatPanel.scrollHeight;
+ }
+
+ hideChatTypingPanel() {
+ const typingIndicator = document.getElementById('typingIndicatorPanel');
+ if (typingIndicator) {
+ typingIndicator.remove();
+ }
+ }
+
+ sendChatToBackend(message) {
+ fetch('/chat', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ message: message })
+ })
+ .then(response => response.json())
+ .then(data => {
+ this.hideChatTypingPanel();
+
+ if (data.success) {
+ this.addChatMessagePanel(data.response, 'bot');
+ } else {
+ this.addChatMessagePanel(
+ `I apologize, but I encountered an error: ${data.error || 'Unknown error'}. Please try again.`,
+ 'bot'
+ );
+ }
+ })
+ .catch(error => {
+ console.error('Chat error:', error);
+ this.hideChatTypingPanel();
+ this.addChatMessagePanel(
+ 'I apologize, but I\'m having trouble connecting right now. Please check your connection and try again.',
+ 'bot'
+ );
+ });
+ }
+
+ // My Papers functionality
+ async loadMyPapers() {
+ const loadingEl = document.getElementById('mypapersLoading');
+ const emptyEl = document.getElementById('mypapersEmpty');
+ const gridEl = document.getElementById('papersGrid');
+
+ if (loadingEl) loadingEl.style.display = 'block';
+ if (emptyEl) emptyEl.style.display = 'none';
+ if (gridEl) gridEl.innerHTML = '';
+
+ try {
+ const response = await fetch('/documents');
+ const data = await response.json();
+
+ if (response.ok && data.success) {
+ this.displayMyPapers(data.documents);
+ } else {
+ throw new Error(data.error || 'Failed to load papers');
+ }
+ } catch (error) {
+ console.error('Error loading papers:', error);
+ this.showToast('Failed to load papers', 'error');
+ if (emptyEl) emptyEl.style.display = 'block';
+ } finally {
+ if (loadingEl) loadingEl.style.display = 'none';
+ }
+ }
+
+ displayMyPapers(documents) {
+ const emptyEl = document.getElementById('mypapersEmpty');
+ const gridEl = document.getElementById('papersGrid');
+
+ if (!documents || documents.length === 0) {
+ if (emptyEl) emptyEl.style.display = 'block';
+ if (gridEl) gridEl.innerHTML = '';
+ return;
+ }
+
+ if (emptyEl) emptyEl.style.display = 'none';
+ if (!gridEl) return;
+
+ gridEl.innerHTML = documents.map(doc => this.createPaperCard(doc)).join('');
+
+ // Add event listeners to the buttons after creating them
+ this.setupMyPapersButtons();
+ }
+
+ setupMyPapersButtons() {
+ console.log('Setting up My Papers buttons...');
+
+ // Add event listeners to Open buttons
+ const openButtons = document.querySelectorAll('.paper-action-btn.primary');
+ console.log(`Found ${openButtons.length} Open buttons`);
+
+ openButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ const docId = button.getAttribute('data-doc-id');
+ console.log('Open button clicked for docId:', docId);
+ this.openPaperFromMyPapers(docId);
+ });
+ });
+
+ // Add event listeners to Delete buttons
+ const deleteButtons = document.querySelectorAll('.paper-action-btn.secondary');
+ console.log(`Found ${deleteButtons.length} Delete buttons`);
+
+ deleteButtons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ const docId = button.getAttribute('data-doc-id');
+ console.log('Delete button clicked for docId:', docId);
+ this.deletePaper(docId);
+ });
+ });
+ }
+
+ createPaperCard(doc) {
+ const icon = this.getDocumentIcon(doc.type);
+ const authors = Array.isArray(doc.authors) ? doc.authors.join(', ') : doc.authors || 'Unknown';
+ const date = doc.upload_date || doc.published || 'Unknown Date';
+
+ return `
+
+
+
+
+
+
+
+
+
+
+
+
+ ${sender === 'user' ? 'You' : 'AI Assistant'} • ${timestamp}
+
+
+
+
+
+ `;
+
+ chatContainer.appendChild(typingIndicator);
+ chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+// Hide typing indicator
+function hideTypingIndicator() {
+ const typingIndicator = document.getElementById('typingIndicator');
+ if (typingIndicator) {
+ typingIndicator.remove();
+ }
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+ // ... existing code ...
+
+ // Initialize tab functionality
+ initializeTabFromHash();
+ initializeChatInput();
+
+ // Listen for hash changes
+ window.addEventListener('hashchange', initializeTabFromHash);
+
+ // ... existing code ...
+});