deep-searcher/deepsearcher/templates/static/js/app.js

// 全局变量
let eventSource = null;
let isStreaming = false;

// 工具函数：显示状态信息
function showStatus(elementId, message, type) {
    const statusElement = document.getElementById(elementId);
    
    // 清除之前的类型类
    statusElement.classList.remove('status-success', 'status-error', 'status-loading');
    
    // 添加新的类型类
    if (type === 'success') {
        statusElement.classList.add('status-success');
        statusElement.innerHTML = message;
    } else if (type === 'error') {
        statusElement.classList.add('status-error');
        statusElement.innerHTML = message;
    } else if (type === 'loading') {
        statusElement.classList.add('status-loading');
        statusElement.innerHTML = `<div class="loading-spinner"></div>${message}`;
    }
    
    statusElement.classList.add('visible');
}

// 工具函数：显示消息流
function displayMessages(messages) {
    const container = document.getElementById('messageContainer');
    container.innerHTML = '';
    
    messages.forEach(message => {
        addMessageToContainer(message);
    });
    
    // 滚动到底部
    container.scrollTop = container.scrollHeight;
}

// 工具函数：添加单个消息到容器
function addMessageToContainer(message) {
    console.log('Adding message to container:', message);
    
    const container = document.getElementById('messageContainer');
    if (!container) {
        console.error('Message container not found!');
        return;
    }
    
    const messageElement = document.createElement('div');
    messageElement.className = `message message-${message.type}`;
    
    const contentElement = document.createElement('div');
    contentElement.textContent = message.content;
    
    messageElement.appendChild(contentElement);
    
    // 只有在有有效时间戳时才显示时间
    if (message.timestamp && !isNaN(message.timestamp)) {
        const date = new Date(message.timestamp * 1000);
        if (!isNaN(date.getTime())) {
            const timestampElement = document.createElement('div');
            timestampElement.className = 'message-timestamp';
            timestampElement.textContent = date.toLocaleTimeString();
            messageElement.appendChild(timestampElement);
        }
    }
    container.appendChild(messageElement);
    
    // 确保处理过程容器是可见的
    const processContainer = document.getElementById('processResult');
    if (processContainer && !processContainer.classList.contains('visible')) {
        processContainer.classList.add('visible');
    }
    
    // 滚动到底部
    container.scrollTop = container.scrollHeight;
    
    console.log('Message added successfully, container now has', container.children.length, 'messages');
}

// 工具函数：隐藏状态信息
function hideStatus(elementId) {
    const statusElement = document.getElementById(elementId);
    statusElement.classList.remove('visible');
}

// 工具函数：显示结果
function showResult() {
    const resultElement = document.getElementById('queryResult');
    resultElement.classList.add('visible');
}

// 工具函数：隐藏结果
function hideResult() {
    const resultElement = document.getElementById('queryResult');
    resultElement.classList.remove('visible');
}

// 工具函数：显示处理过程
function showProcessResult() {
    const processElement = document.getElementById('processResult');
    processElement.classList.add('visible');
}

// 工具函数：隐藏处理过程
function hideProcessResult() {
    const processElement = document.getElementById('processResult');
    processElement.classList.remove('visible');
}

// 工具函数：转义HTML特殊字符
function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

// 工具函数：设置按钮加载状态
function setButtonLoading(button, loading) {
    if (loading) {
        button.classList.add('loading');
        button.disabled = true;
    } else {
        button.classList.remove('loading');
        button.disabled = false;
    }
}

// 工具函数：关闭EventSource连接
function closeEventSource() {
    if (eventSource) {
        console.log('Closing eventSource in closeEventSource function');
        eventSource.close();
        eventSource = null;
    }
    if (window.currentEventSource) {
        console.log('Closing currentEventSource in closeEventSource function');
        window.currentEventSource.close();
        window.currentEventSource = null;
    }
    isStreaming = false;
}

// 工具函数：处理实时消息流
function handleStreamMessage(data) {
    try {
        const message = JSON.parse(data);
        
        switch (message.type) {
            case 'connection':
                console.log('Connected to message stream:', message.message);
                break;
            case 'heartbeat':
                // 心跳消息，不需要处理
                break;
            case 'start':
                console.log('Query started:', message.content);
                showStatus('queryStatus', ' 正在处理...', 'loading');
                addMessageToContainer(message);
                break;
            case 'complete':
                console.log('Query completed - closing connection');
                showStatus('queryStatus', '查询完成', 'success');
                addMessageToContainer(message);
                // 关闭EventSource连接
                if (window.currentEventSource) {
                    console.log('Closing currentEventSource');
                    window.currentEventSource.close();
                    window.currentEventSource = null;
                }
                isStreaming = false;
                setButtonLoading(document.getElementById('queryBtn'), false);
                console.log('Query completed - connection closed, isStreaming set to false');
                break;
            case 'error':
                console.error('Error:', message.content);
                showStatus('queryStatus', message.content, 'error');
                addMessageToContainer(message);
                // 关闭EventSource连接
                if (window.currentEventSource) {
                    window.currentEventSource.close();
                    window.currentEventSource = null;
                }
                isStreaming = false;
                setButtonLoading(document.getElementById('queryBtn'), false);
                break;
            case 'info':
                // 处理信息消息
                console.log('Processing info message:', message.content.substring(0, 100) + '...');
                addMessageToContainer(message);
                break;
            case 'answer':
                // 处理answer类型，显示查询结果
                console.log('Processing answer message:', message.content.substring(0, 100) + '...');
                // 将结果内容显示在结果区域
                if (message.content && message.content !== "==== FINAL ANSWER====") {
                    document.getElementById('resultText').textContent = message.content;
                    showResult();
                }
                // 不将answer消息添加到处理过程容器中，只显示在查询结果框中
                break;
            default:
                console.log('Unknown message type:', message.type);
        }
    } catch (error) {
        console.error('Error parsing message:', error);
    }
}

// 工具函数：开始实时消息流
function startMessageStream() {
    closeEventSource(); // 关闭之前的连接
    
    eventSource = new EventSource('/stream-messages/');
    
    eventSource.onopen = function(event) {
        console.log('EventSource connection opened');
    };
    
    eventSource.onmessage = function(event) {
        handleStreamMessage(event.data);
    };
    
    eventSource.onerror = function(event) {
        console.error('EventSource error:', event);
        if (eventSource.readyState === EventSource.CLOSED) {
            console.log('EventSource connection closed');
        }
    };
}

// 加载文件功能
document.getElementById('loadFilesBtn').addEventListener('click', async function() {
    const button = this;
    const filePathsInput = document.getElementById('filePaths').value;
    const collectionName = document.getElementById('collectionName').value;
    const collectionDesc = document.getElementById('collectionDesc').value;
    
    if (!filePathsInput) {
        showStatus('loadStatus', '请提供至少一个文件路径', 'error');
        return;
    }
    
    const filePaths = filePathsInput.split(',').map(path => path.trim()).filter(path => path);
    
    setButtonLoading(button, true);
    showStatus('loadStatus', ' 正在加载文件...', 'loading');
    hideResult();
    hideProcessResult();
    
    try {
        const response = await fetch('/load-files/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                paths: filePaths,
                collection_name: collectionName || undefined,
                collection_description: collectionDesc || undefined
            })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showStatus('loadStatus', data.message, 'success');
        } else {
            showStatus('loadStatus', `加载失败: ${data.detail}`, 'error');
        }
    } catch (error) {
        showStatus('loadStatus', `请求失败: ${error.message}`, 'error');
    } finally {
        setButtonLoading(button, false);
    }
});

// 清空消息功能
document.getElementById('clearMessagesBtn').addEventListener('click', async function() {
    try {
        const response = await fetch('/clear-messages/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        if (response.ok) {
            // 清空消息容器
            const container = document.getElementById('messageContainer');
            container.innerHTML = '';
            
            // 清空查询结果
            const resultText = document.getElementById('resultText');
            resultText.textContent = '';
            
            // 隐藏处理过程容器
            hideProcessResult();
            
            // 隐藏查询结果容器
            hideResult();
            
            showStatus('queryStatus', '消息已清空', 'success');
        } else {
            showStatus('queryStatus', '清空消息失败', 'error');
        }
    } catch (error) {
        showStatus('queryStatus', `请求失败: ${error.message}`, 'error');
    }
});

// 加载网站内容功能
document.getElementById('loadWebsiteBtn').addEventListener('click', async function() {
    const button = this;
    const urlsInput = document.getElementById('websiteUrls').value;
    const collectionName = document.getElementById('webCollectionName').value;
    const collectionDesc = document.getElementById('webCollectionDesc').value;
    
    if (!urlsInput) {
        showStatus('webLoadStatus', '请提供至少一个网站URL', 'error');
        return;
    }
    
    const urls = urlsInput.split(',').map(url => url.trim()).filter(url => url);
    
    setButtonLoading(button, true);
    showStatus('webLoadStatus', ' 正在加载网站...', 'loading');
    hideResult();
    hideProcessResult();
    
    try {
        const response = await fetch('/load-website/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                urls: urls,
                collection_name: collectionName || undefined,
                collection_description: collectionDesc || undefined
            })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showStatus('webLoadStatus', data.message, 'success');
        } else {
            showStatus('webLoadStatus', `加载失败: ${data.detail}`, 'error');
        }
    } catch (error) {
        showStatus('webLoadStatus', `请求失败: ${error.message}`, 'error');
    } finally {
        setButtonLoading(button, false);
    }
});

// 查询功能 - 使用实时流
document.getElementById('queryBtn').addEventListener('click', async function() {
    const button = this;
    const queryText = document.getElementById('queryText').value;
    const maxIter = parseInt(document.getElementById('maxIter').value);
    
    if (!queryText) {
        showStatus('queryStatus', '请输入查询问题', 'error');
        return;
    }
    
    if (isNaN(maxIter) || maxIter < 1 || maxIter > 10) {
        showStatus('queryStatus', '迭代次数必须是1到10之间的整数', 'error');
        return;
    }
    
    if (isStreaming) {
        console.log('Query already in progress, isStreaming:', isStreaming);
        showStatus('queryStatus', '查询正在进行中，请等待完成', 'error');
        return;
    }
    
    setButtonLoading(button, true);
    showStatus('queryStatus', '正在启动查询...', 'loading');
    hideResult();
    hideProcessResult();
    
    // 清空消息容器
    const container = document.getElementById('messageContainer');
    container.innerHTML = '';
    
    try {
        console.log('Starting new query, setting isStreaming to true');
        isStreaming = true;
        
        // 确保没有其他连接存在
        if (window.currentEventSource) {
            console.log('Closing existing EventSource connection');
            window.currentEventSource.close();
            window.currentEventSource = null;
        }
        
        // 使用EventSource直接连接到查询流
        const eventSource = new EventSource(`/query-stream/?original_query=${encodeURIComponent(queryText)}&max_iter=${maxIter}`);
        
        // 保存EventSource引用以便后续关闭
        window.currentEventSource = eventSource;
        
        eventSource.onopen = function(event) {
            console.log('EventSource connection opened for query');
            showStatus('queryStatus', ' 正在处理...', 'loading');
        };
        
        eventSource.onmessage = function(event) {
            console.log('Received message:', event.data);
            handleStreamMessage(event.data);
        };
        
        eventSource.onerror = function(event) {
            console.error('EventSource error:', event);
            if (eventSource.readyState === EventSource.CLOSED) {
                console.log('EventSource connection closed due to error');
                isStreaming = false;
                setButtonLoading(button, false);
                window.currentEventSource = null;
            }
        };
        
    } catch (error) {
        console.error('Query error:', error);
        showStatus('queryStatus', `请求失败: ${error.message}`, 'error');
        isStreaming = false;
        setButtonLoading(button, false);
    }
});

// 页面卸载时清理连接
window.addEventListener('beforeunload', function() {
    if (window.currentEventSource) {
        window.currentEventSource.close();
        window.currentEventSource = null;
    }
});