agent-api-server 2.1.7__py3-none-any.whl

agent_api_server/client/js/app.js

@@ -0,0 +1,1499 @@
+let currentInterruptData = null; // 存储当前的 interrupt 数据
+
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const createThreadBtn = document.getElementById('createThreadBtn');
+    const connectBtn = document.getElementById('connectBtn');
+    const disconnectBtn = document.getElementById('disconnectBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const graphNameInput = document.getElementById('graphName');
+    const threadIdInput = document.getElementById('threadId');
+    const apiUrlInput = document.getElementById('apiUrl');
+    const messageContentInput = document.getElementById('messageContent');
+    const streamContainer = document.getElementById('streamContainer');
+    const statusElement = document.getElementById('status');
+    const graphSelect = document.getElementById('graphSelect');
+    const refreshGraphsBtn = document.getElementById('refreshGraphsBtn');
+    const getConfigBtn = document.getElementById('getConfigBtn');
+
+    // Interrupt Modal Elements
+    const interruptModal = document.getElementById('interruptModal');
+    const interruptInput = document.getElementById('interruptInput');
+    const confirmInterruptBtn = document.getElementById('confirmInterruptBtn');
+    const cancelInterruptBtn = document.getElementById('cancelInterruptBtn');
+
+    // State
+    let eventSource = null;
+    let isConnected = false;
+    let currentThreadId = '';
+    let apiUrlTemplate = apiUrlInput.value;
+    let currentApiUrl = ''; // Store API URL during interrupt
+    let currentMessageContent = {}; // Store original message content during interrupt
+    let currentSchema = null;
+
+    // Token streaming state
+    let currentStreamingMessage = null;
+    let currentStreamingContent = '';
+    let streamingTimeout = null;
+    let streamingNodes = new Set(); // 记录正在流式输出的节点
+    let completedStreamingNodes = new Set(); // 记录已完成流式输出的节点
+    let pendingToolCalls = new Map(); // 存储待处理的 tool calls，key: node, value: tool calls
+
+    // 添加获取schema的函数
+    async function loadSchema() {
+        const graphName = graphNameInput.value.trim();
+        if (!graphName) {
+            resetInputForm();
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/v1/schema/?graph_name=${encodeURIComponent(graphName)}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            currentSchema = await response.json();
+            generateInputForm(currentSchema);
+
+        } catch (error) {
+            console.error('Error loading schema:', error);
+            currentSchema = null;
+            resetInputForm();
+        }
+    }
+
+    // 生成输入表单
+    function generateInputForm(schema) {
+        const formContainer = document.getElementById('inputFormContainer');
+        formContainer.innerHTML = '';
+
+        const properties = schema.properties || {};
+        const requiredFields = schema.required || [];
+
+        Object.entries(properties).forEach(([key, prop]) => {
+            const fieldContainer = document.createElement('div');
+            fieldContainer.className = 'form-field';
+
+            const label = document.createElement('label');
+            label.textContent = prop.title || key;
+            if (requiredFields.includes(key)) {
+                label.innerHTML += ' <span class="required">*</span>';
+            }
+            fieldContainer.appendChild(label);
+
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.id = `input_${key}`;
+            input.placeholder = `Enter ${prop.title || key}`;
+            input.dataset.key = key;
+            input.required = requiredFields.includes(key);
+            fieldContainer.appendChild(input);
+            formContainer.appendChild(fieldContainer);
+        });
+    }
+
+    // 重置输入表单
+    function resetInputForm() {
+        const formContainer = document.getElementById('inputFormContainer');
+        formContainer.innerHTML = '<div class="empty-form">No schema loaded. Select a graph first.</div>';
+    }
+
+    // 从表单生成请求体
+    function generateRequestBody() {
+        if (!currentSchema) {
+            return { inputs: {} };
+        }
+
+        const inputs = {};
+        const requiredFields = currentSchema.required || [];
+        let isValid = true;
+
+        Object.entries(currentSchema.properties || {}).forEach(([key]) => {
+            const input = document.querySelector(`#input_${key}`);
+            if (input) {
+                const value = input.value.trim();
+
+                if (requiredFields.includes(key) && !value) {
+                    input.classList.add('error');
+                    isValid = false;
+                } else {
+                    input.classList.remove('error');
+                    inputs[key] = value;
+                }
+            }
+        });
+
+        if (!isValid) {
+            throw new Error('Please fill in all required fields');
+        }
+
+        return { inputs };
+    }
+
+    // Load available graphs from API
+    async function loadGraphs() {
+        try {
+            graphSelect.disabled = true;
+            refreshGraphsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            graphSelect.innerHTML = '<option value="" disabled selected>Loading graphs...</option>';
+
+            const response = await fetch('/api/v1/graph/', {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            const graphs = data.graphs || [];
+            const graphCount = data.count || 0;
+
+            if (graphCount === 0 || graphs.length === 0) {
+                graphSelect.innerHTML = '<option value="" disabled selected>No graphs available</option>';
+                return;
+            }
+
+            graphSelect.innerHTML = '';
+            const defaultOption = document.createElement('option');
+            defaultOption.value = '';
+            defaultOption.textContent = '-- Select a Graph --';
+            defaultOption.disabled = true;
+            defaultOption.selected = true;
+            graphSelect.appendChild(defaultOption);
+
+            graphs.forEach(graph => {
+                const option = document.createElement('option');
+                option.value = graph;
+                option.textContent = graph;
+                graphSelect.appendChild(option);
+            });
+
+            graphSelect.addEventListener('change', function() {
+                if (this.value) {
+                    graphNameInput.value = this.value;
+                }
+            });
+
+            const successMessage = {
+                node: 'system',
+                update_type: 'graphs_loaded',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Successfully loaded ${graphCount} graphs from API`,
+                    response_metadata: {}
+                }
+            };
+            addMessage(successMessage);
+
+        } catch (error) {
+            console.error('Error loading graphs:', error);
+            graphSelect.innerHTML = '<option value="" disabled selected>Error loading graphs</option>';
+
+            const errorMessage = {
+                node: 'system',
+                update_type: 'error',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Failed to load graphs: ${error.message}`,
+                    response_metadata: {}
+                }
+            };
+            addMessage(errorMessage);
+        } finally {
+            graphSelect.disabled = false;
+            refreshGraphsBtn.innerHTML = '<i class="fas fa-sync-alt"></i>';
+        }
+    }
+
+    // Format timestamp
+    function formatTimestamp(timestamp) {
+        if (!timestamp) return 'N/A';
+        const date = new Date(timestamp);
+        return date.toLocaleString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: false
+        });
+    }
+
+    // Format tool calls
+    function formatToolCalls(toolCalls) {
+        if (!toolCalls || toolCalls.length === 0) return '';
+
+        return toolCalls.map(tool => {
+            return `
+                <div class="tool-call">
+                    <div class="tool-call-name">
+                        <i class="fas fa-cog"></i> ${tool.name}
+                    </div>
+                    <div class="tool-call-args">
+                        <pre>${JSON.stringify(tool.args, null, 2)}</pre>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    // Format token usage
+    function formatTokenUsage(metadata) {
+        if (!metadata || !metadata.token_usage) return '';
+
+        const usage = metadata.token_usage;
+        return `
+            <div class="token-usage">
+                <span class="token-prompt">
+                    <i class="fas fa-keyboard"></i> Prompt: ${usage.prompt_tokens || 0}
+                </span>
+                <span class="token-completion">
+                    <i class="fas fa-reply"></i> Completion: ${usage.completion_tokens || 0}
+                </span>
+                <span class="token-total">
+                    <i class="fas fa-calculator"></i> Total: ${usage.total_tokens || 0}
+                </span>
+            </div>
+        `;
+    }
+
+    // Show interrupt dialog
+    function showInterruptDialog() {
+        if (!currentInterruptData) return;
+
+        const promptText = currentInterruptData.update_content?.content || "Please provide the required information to continue:";
+
+        interruptModal.style.display = 'block';
+        interruptInput.value = '';
+
+        const promptElement = document.createElement('div');
+        promptElement.className = 'interrupt-prompt';
+        promptElement.textContent = promptText;
+
+        const modalContent = interruptModal.querySelector('.modal-content');
+        const existingPrompt = modalContent.querySelector('.interrupt-prompt');
+        if (existingPrompt) {
+            existingPrompt.remove();
+        }
+
+        modalContent.insertBefore(promptElement, interruptInput);
+        interruptInput.focus();
+    }
+
+    // Hide interrupt dialog
+    function hideInterruptDialog() {
+        interruptModal.style.display = 'none';
+    }
+
+    // Continue after interrupt with user input
+    async function continueAfterInterrupt() {
+        const userInput = interruptInput.value.trim();
+        if (!userInput) {
+            alert('Please enter a response to continue');
+            return;
+        }
+
+        hideInterruptDialog();
+        currentInterruptData = null; // 重置 interrupt 数据
+
+        const newMessageContent = {
+            ...currentMessageContent,
+            inputs: {
+                resume: userInput
+            }
+        };
+
+        try {
+            statusElement.className = 'status status-connecting';
+            statusElement.innerHTML = '<i class="fas fa-sync-alt fa-spin"></i> Resuming...';
+
+            const response = await fetch(currentApiUrl, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'text/event-stream',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(newMessageContent)
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            const processChunk = ({ done, value }) => {
+                if (done) {
+                    disconnectStream();
+                    return;
+                }
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop();
+
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        try {
+                            const data = JSON.parse(line.substring(6));
+                            addMessage(data);
+                        } catch (e) {
+                            console.error('Error parsing event data:', e);
+                        }
+                    }
+                }
+
+                return reader.read().then(processChunk);
+            };
+
+            reader.read().then(processChunk);
+
+        } catch (error) {
+            console.error('Error resuming after interrupt:', error);
+            statusElement.className = 'status status-disconnected';
+            statusElement.innerHTML = '<i class="fas fa-times-circle"></i> Error Resuming';
+
+            const errorMessage = {
+                node: 'system',
+                update_type: 'error',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Failed to resume after interrupt: ${error.message}`,
+                    response_metadata: {}
+                }
+            };
+            addMessage(errorMessage);
+        }
+    }
+
+    function getOrCreateStreamingMessage(node, updateType, timestamp) {
+        if (streamingNodes.has(node) && currentStreamingMessage) {
+            return currentStreamingMessage;
+        }
+
+        if (completedStreamingNodes.has(node)) {
+            return null;
+        }
+
+        // 否则创建新的消息元素
+        const messageElement = document.createElement('div');
+        messageElement.className = 'message streaming-message';
+
+        messageElement.innerHTML = [
+            '<button class="copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>',
+            '<div class="message-header">',
+            `<span class="message-node node-${node}">`,
+            node === 'agent' ? '<i class="fas fa-robot"></i>' :
+            node === 'tools' ? '<i class="fas fa-tools"></i>' : '<i class="fas fa-server"></i>',
+            `${node}</span>`,
+            `<span>${updateType}</span>`,
+            `<span class="message-timestamp">${timestamp}</span>`,
+            '<span class="streaming-indicator"><i class="fas fa-circle"></i> Streaming</span>',
+            '</div>',
+            '<div class="message-content streaming-content"></div>'
+        ].join('');
+
+        // 添加到DOM
+        const emptyContent = streamContainer.querySelector('.empty-content');
+        if (emptyContent) {
+            emptyContent.remove();
+        }
+        streamContainer.appendChild(messageElement);
+
+        // 记录这个节点正在流式输出
+        streamingNodes.add(node);
+        currentStreamingMessage = messageElement;
+        currentStreamingContent = '';
+
+        // 添加复制按钮功能
+        const copyBtn = messageElement.querySelector('.copy-btn');
+        copyBtn.addEventListener('click', () => {
+            const contentElement = messageElement.querySelector('.message-content');
+            const textToCopy = contentElement.textContent || '';
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                setTimeout(() => {
+                    copyBtn.innerHTML = '<i class="far fa-copy"></i>';
+                }, 2000);
+            });
+        });
+
+        return messageElement;
+    }
+
+    // 处理token流式输出
+    function handleTokenStream(data) {
+        const node = data.node || 'unknown';
+        const updateType = data.update_type || 'unknown';
+        const timestamp = formatTimestamp(data.timestamp);
+        const tokenContent = data.update_content || '';
+
+        // 如果是complete事件，完成当前流，并检查是否有tool calls需要处理
+        if (updateType === 'complete') {
+            // 在完成前检查是否有tool calls需要保存
+            const content = data.update_content || {};
+            if (content.tool_calls && content.tool_calls.length > 0) {
+                pendingToolCalls.set(node, {
+                    tool_calls: content.tool_calls,
+                    timestamp: data.timestamp,
+                    update_type: updateType,
+                    response_metadata: content.response_metadata
+                });
+            }
+            completeStreamingMessage(node);
+            return;
+        }
+
+        // 查找或创建当前流式消息的容器
+        const messageElement = getOrCreateStreamingMessage(node, updateType, timestamp);
+
+        // 如果返回null，说明这个节点已经完成流式输出，跳过处理
+        if (!messageElement) {
+            return;
+        }
+
+        // 更新内容
+        if (tokenContent && messageElement) {
+            currentStreamingContent += tokenContent;
+            const contentElement = messageElement.querySelector('.message-content');
+            if (contentElement) {
+                contentElement.textContent = currentStreamingContent;
+            }
+
+            // 清除之前的超时
+            if (streamingTimeout) {
+                clearTimeout(streamingTimeout);
+            }
+
+            // 设置新的超时，如果一段时间没有新token，认为流结束
+            streamingTimeout = setTimeout(() => {
+                if (streamingNodes.has(node)) {
+                    completeStreamingMessage(node);
+                }
+            }, 1000); // 1秒内没有新token认为流结束
+        }
+
+        streamContainer.scrollTop = streamContainer.scrollHeight;
+    }
+
+    // 完成流式消息
+    function completeStreamingMessage(node) {
+        if (currentStreamingMessage && streamingNodes.has(node)) {
+            // 检查是否有待处理的tool calls
+            if (pendingToolCalls.has(node)) {
+                const toolCallData = pendingToolCalls.get(node);
+
+                // 为tool calls创建单独的消息卡片
+                createToolCallMessage(node, toolCallData);
+
+                // 清除已处理的tool calls
+                pendingToolCalls.delete(node);
+            }
+
+            // 移除流式指示器
+            const indicator = currentStreamingMessage.querySelector('.streaming-indicator');
+            if (indicator) {
+                indicator.remove();
+            }
+
+            // 移除流式样式
+            currentStreamingMessage.classList.remove('streaming-message');
+            const contentElement = currentStreamingMessage.querySelector('.message-content');
+            if (contentElement) {
+                contentElement.classList.remove('streaming-content');
+            }
+
+            // 从流式节点集合中移除，并添加到已完成集合
+            streamingNodes.delete(node);
+            completedStreamingNodes.add(node);
+
+            // 只有当没有其他节点在流式输出时才重置
+            if (streamingNodes.size === 0) {
+                currentStreamingMessage = null;
+                currentStreamingContent = '';
+            }
+        }
+
+        if (streamingTimeout) {
+            clearTimeout(streamingTimeout);
+            streamingTimeout = null;
+        }
+    }
+
+    function createToolCallMessage(node, toolCallData) {
+        const timestamp = formatTimestamp(toolCallData.timestamp);
+        const toolCallsDisplay = formatToolCalls(toolCallData.tool_calls);
+        const tokenUsage = formatTokenUsage(toolCallData.response_metadata);
+
+        const toolCallElement = document.createElement('div');
+        toolCallElement.className = 'message';
+
+        toolCallElement.innerHTML = [
+            '<button class="copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>',
+            '<div class="message-header">',
+            `<span class="message-node node-${node}">`,
+            node === 'agent' ? '<i class="fas fa-robot"></i>' :
+            node === 'tools' ? '<i class="fas fa-tools"></i>' : '<i class="fas fa-server"></i>',
+            `${node}</span>`,
+            `<span>${toolCallData.update_type}</span>`,
+            `<span class="message-timestamp">${timestamp}</span>`,
+            '</div>',
+            '<div class="message-content"><div class="empty-content">[Tool calls initiated]</div></div>',
+            toolCallsDisplay,
+            tokenUsage
+        ].join('');
+
+        // 添加到DOM，放在当前流式消息之后
+        if (currentStreamingMessage && currentStreamingMessage.parentNode) {
+            currentStreamingMessage.parentNode.insertBefore(toolCallElement, currentStreamingMessage.nextSibling);
+        } else {
+            const emptyContent = streamContainer.querySelector('.empty-content');
+            if (emptyContent) {
+                emptyContent.remove();
+            }
+            streamContainer.appendChild(toolCallElement);
+        }
+
+        const copyBtn = toolCallElement.querySelector('.copy-btn');
+        copyBtn.addEventListener('click', () => {
+            const textToCopy = [
+                `${node} ${toolCallData.update_type} at ${timestamp}`,
+                '',
+                'Tool calls:',
+                toolCallsDisplay ? toolCallsDisplay : ''
+            ].filter(Boolean).join('\n');
+
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                setTimeout(() => {
+                    copyBtn.innerHTML = '<i class="far fa-copy"></i>';
+                }, 2000);
+            });
+        });
+
+        streamContainer.scrollTop = streamContainer.scrollHeight;
+    }
+
+
+    // 检查节点是否正在流式输出
+    function isNodeStreaming(node) {
+        return streamingNodes.has(node);
+    }
+
+    function isNodeCompletedStreaming(node) {
+        return completedStreamingNodes.has(node);
+    }
+
+    // Add message to stream
+    function addMessage(data) {
+        if (!data) return;
+
+        const node = data.node || 'unknown';
+
+        // Handle interrupt node
+        if (node === '__interrupt__') {
+            currentInterruptData = data;
+            showInterruptDialog();
+            return;
+        }
+
+        // Handle token streaming events
+        if (data.event === 'token_stream') {
+            handleTokenStream(data);
+            return;
+        }
+
+        // 如果这个节点正在流式输出，跳过普通消息（避免重复）
+        if (isNodeStreaming(node)) {
+            console.log(`Skipping regular message for streaming node: ${node}`);
+            return;
+        }
+
+        // 如果这个节点已经完成流式输出，检查是否有tool calls需要特殊处理
+        if (isNodeCompletedStreaming(node)) {
+            const content = data.update_content || {};
+
+            // 如果有tool calls，创建单独的工具调用消息
+            if (content.tool_calls && content.tool_calls.length > 0) {
+                console.log(`Creating tool call message for completed streaming node: ${node}`);
+                createToolCallMessage(node, {
+                    tool_calls: content.tool_calls,
+                    timestamp: data.timestamp,
+                    update_type: data.update_type || 'complete',
+                    response_metadata: content.response_metadata
+                });
+            } else {
+                console.log(`Skipping regular message for completed streaming node: ${node}`);
+            }
+
+            // 从已完成集合中移除，以便后续该节点的新消息可以正常显示
+            completedStreamingNodes.delete(node);
+            return;
+        }
+
+        // 正常的消息处理逻辑（非流式输出的消息）
+        const updateType = data.update_type || 'unknown';
+        const timestamp = formatTimestamp(data.timestamp);
+        const content = data.update_content || {};
+
+        // 1. Process references display
+        let referencesDisplay = '';
+        if (content.references && content.references.length > 0) {
+            try {
+                referencesDisplay = [
+                    '<div class="references-section">',
+                    '<div class="section-title"><i class="fas fa-book"></i> References</div>',
+                    `<pre class="references-raw">${JSON.stringify(content.references, null, 2)}</pre>`,
+                    '</div>'
+                ].join('');
+            } catch (e) {
+                referencesDisplay = [
+                    '<div class="references-section">',
+                    '<div class="section-title"><i class="fas fa-book"></i> References (原始格式)</div>',
+                    `<div class="references-raw">${content.references}</div>`,
+                    '</div>'
+                ].join('');
+            }
+        }
+
+        // 2. Process main content display
+        let displayContent = (content.content || '').trim();
+        let toolCallsDisplay = '';
+        let chartHtml = '';
+        let chartConfig = null;
+
+        // Handle special case for supervisor_message
+        if (data.event === 'node_message' && data.data) {
+            displayContent = data.data.trim();
+        }
+
+        // Check for chart data in content
+        if (displayContent.includes('```vis-chart')) {
+            try {
+                const chartConfigMatch = displayContent.match(/```vis-chart\n([\s\S]*?)\n```/);
+                if (chartConfigMatch?.[1]) {
+                    chartConfig = JSON.parse(chartConfigMatch[1]);
+                    const chartId = `chart-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+                    chartHtml = `<div id="${chartId}" class="chart-container"></div>`;
+
+                    displayContent = displayContent.replace(/```vis-chart\n[\s\S]*?\n```(\n)?/g, '').trim();
+                }
+            } catch (e) {
+                console.error('Error parsing chart config:', e);
+            }
+        }
+
+        if ((!displayContent || displayContent.trim() === '') && content.tool_calls) {
+            toolCallsDisplay = formatToolCalls(content.tool_calls);
+            displayContent = '<div class="empty-content">[No content - tool call initiated]</div>';
+        } else if (!displayContent) {
+            displayContent = '<div class="empty-content">[Empty content]</div>';
+        }
+
+        // 3. Process token usage display
+        const tokenUsage = formatTokenUsage(content.response_metadata);
+
+        // 4. Build complete message element
+        const messageElement = document.createElement('div');
+        messageElement.className = 'message';
+
+        messageElement.innerHTML = [
+            '<button class="copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>',
+            '<div class="message-header">',
+            `<span class="message-node node-${node}">`,
+            node === 'agent' ? '<i class="fas fa-robot"></i>' :
+            node === 'tools' ? '<i class="fas fa-tools"></i>' : '<i class="fas fa-server"></i>',
+            `${node}</span>`,
+            `<span>${updateType}</span>`,
+            `<span class="message-timestamp">${timestamp}</span>`,
+            '</div>',
+            `<div class="message-content">${displayContent}${chartHtml}</div>`,
+            toolCallsDisplay,
+            tokenUsage,
+            referencesDisplay
+        ].join('');
+
+        // Add to DOM
+        const emptyContent = streamContainer.querySelector('.empty-content');
+        if (emptyContent) {
+            emptyContent.remove();
+        }
+        streamContainer.appendChild(messageElement);
+
+        // 5. Render chart after DOM is updated (if chart exists)
+        if (chartConfig) {
+            setTimeout(() => {
+                const chartId = messageElement.querySelector('.chart-container')?.id;
+                if (chartId && window.AdvtGptChart?.GPTVis && window.React && window.ReactDOM) {
+                    try {
+                        const chartMarkdown = `\`\`\`vis-chart\n${JSON.stringify(chartConfig, null, 2)}\n\`\`\``;
+                        ReactDOM.createRoot(document.getElementById(chartId)).render(
+                            React.createElement(
+                                window.AdvtGptChart.GPTVis,
+                                null,
+                                chartMarkdown
+                            )
+                        );
+                    } catch (e) {
+                        console.error('Chart rendering error:', e);
+                        const container = document.getElementById(chartId);
+                        if (container) {
+                            container.innerHTML = '<div class="chart-error">图表渲染失败</div>';
+                        }
+                    }
+                }
+            }, 0);
+        }
+
+        // 6. Add copy button functionality
+        const copyBtn = messageElement.querySelector('.copy-btn');
+        copyBtn.addEventListener('click', () => {
+            const textToCopy = [
+                `${node} ${updateType} at ${timestamp}`,
+                '',
+                displayContent,
+                toolCallsDisplay ? '\nTool calls:\n' + toolCallsDisplay : '',
+                referencesDisplay ? '\nReferences:\n' + JSON.stringify(content.references) : ''
+            ].filter(Boolean).join('\n');
+
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                setTimeout(() => {
+                    copyBtn.innerHTML = '<i class="far fa-copy"></i>';
+                }, 2000);
+            });
+        });
+
+        streamContainer.scrollTop = streamContainer.scrollHeight;
+    }
+
+    // Create a new thread
+    async function createThread() {
+        const graphName = graphNameInput.value.trim();
+        if (!graphName) {
+            alert('Please enter a graph name');
+            return;
+        }
+
+        try {
+            createThreadBtn.disabled = true;
+            createThreadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';
+
+            clearStream();
+
+            const apiUrl = `/api/v1/thread/?graph_name=${encodeURIComponent(graphName)}`;
+
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            currentThreadId = data.thread_id || '';
+
+            threadIdInput.value = currentThreadId;
+            threadIdInput.removeAttribute('readonly');
+
+            apiUrlInput.value = apiUrlTemplate.replace('{thread_id}', currentThreadId);
+
+            const successMessage = {
+                node: 'system',
+                update_type: 'thread_created',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Successfully created new thread with ID: ${currentThreadId}`,
+                    response_metadata: {}
+                }
+            };
+
+            addMessage(successMessage);
+
+            statusElement.className = 'status status-connected';
+            statusElement.innerHTML = '<i class="fas fa-check-circle"></i> Thread Created';
+
+        } catch (error) {
+            console.error('Error creating thread:', error);
+            alert(`Failed to create thread: ${error.message}`);
+
+            const errorMessage = {
+                node: 'system',
+                update_type: 'error',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Failed to create thread: ${error.message}`,
+                    response_metadata: {}
+                }
+            };
+
+            addMessage(errorMessage);
+
+        } finally {
+            createThreadBtn.disabled = false;
+            createThreadBtn.innerHTML = '<i class="fas fa-plus"></i> Create Thread';
+        }
+    }
+
+    // Connect to SSE stream using POST
+    async function connectStream() {
+        if (isConnected) return;
+
+        const threadId = threadIdInput.value.trim();
+        if (!threadId) {
+            alert('Please create or enter a thread ID first');
+            return;
+        }
+
+        currentApiUrl = apiUrlInput.value.trim();
+        if (!currentApiUrl) {
+            alert('Please enter an API endpoint');
+            return;
+        }
+
+        currentApiUrl = currentApiUrl.replace('{thread_id}', threadId);
+
+        try {
+            currentMessageContent = generateRequestBody();
+
+            statusElement.className = 'status status-connecting';
+            statusElement.innerHTML = '<i class="fas fa-sync-alt fa-spin"></i> Connecting...';
+
+            const response = await fetch(currentApiUrl, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'text/event-stream',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(currentMessageContent)
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            const processChunk = ({ done, value }) => {
+                if (done) {
+                    disconnectStream();
+                    return;
+                }
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop();
+
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        try {
+                            const data = JSON.parse(line.substring(6));
+                            addMessage(data);
+                        } catch (e) {
+                            console.error('Error parsing event data:', e);
+                        }
+                    }
+                }
+
+                return reader.read().then(processChunk);
+            };
+
+            reader.read().then(processChunk);
+
+            isConnected = true;
+            connectBtn.disabled = true;
+            disconnectBtn.disabled = false;
+            statusElement.className = 'status status-connected pulse';
+            statusElement.innerHTML = '<i class="fas fa-check-circle"></i> Connected - Receiving Data';
+
+            const connectionMessage = {
+                node: 'system',
+                update_type: 'connection',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Successfully connected to SSE stream at ${currentApiUrl}`,
+                    response_metadata: {}
+                }
+            };
+
+            addMessage(connectionMessage);
+
+        } catch (e) {
+            console.error('Error connecting to stream:', e);
+            alert('Error connecting to stream: ' + e.message);
+            statusElement.className = 'status status-disconnected';
+            statusElement.innerHTML = '<i class="fas fa-times-circle"></i> Disconnected';
+        }
+    }
+
+    // Disconnect from SSE stream
+    function disconnectStream() {
+        if (eventSource) {
+            eventSource.close();
+            eventSource = null;
+        }
+
+        // 完成任何正在进行的流式消息
+        streamingNodes.forEach(node => {
+            completeStreamingMessage(node);
+        });
+        streamingNodes.clear();
+
+        isConnected = false;
+        connectBtn.disabled = false;
+        disconnectBtn.disabled = true;
+        statusElement.className = 'status status-disconnected';
+        statusElement.innerHTML = '<i class="fas fa-times-circle"></i> Disconnected';
+
+        const disconnectionMessage = {
+            node: 'system',
+            update_type: 'disconnection',
+            timestamp: new Date().toISOString(),
+            update_content: {
+                content: 'Disconnected from SSE stream',
+                response_metadata: {}
+            }
+        };
+
+        addMessage(disconnectionMessage);
+    }
+
+    // Clear the stream container
+    function clearStream() {
+        // 重置流式状态
+        streamingNodes.forEach(node => {
+            completeStreamingMessage(node);
+        });
+        streamingNodes.clear();
+        completedStreamingNodes.clear(); // 清空已完成节点集合
+        pendingToolCalls.clear(); // 清空待处理的tool calls
+        streamContainer.innerHTML = '<div class="empty-content">No stream data yet. Create a thread and connect to start receiving events.</div>';
+    }
+
+    // Get agent configuration
+    async function getAgentConfig() {
+        const graphName = graphNameInput.value.trim();
+        if (!graphName) {
+            alert('Please enter a graph name first');
+            return;
+        }
+
+        try {
+            getConfigBtn.disabled = true;
+            getConfigBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
+
+            const response = await fetch(`/api/v1/config/?graph_name=${encodeURIComponent(graphName)}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const configData = await response.json();
+
+            // 显示配置信息
+            displayConfig(configData);
+
+            const successMessage = {
+                node: 'system',
+                update_type: 'config_loaded',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Successfully loaded config for graph: ${graphName}`,
+                    response_metadata: {}
+                }
+            };
+            addMessage(successMessage);
+
+        } catch (error) {
+            console.error('Error loading config:', error);
+
+            const errorMessage = {
+                node: 'system',
+                update_type: 'error',
+                timestamp: new Date().toISOString(),
+                update_content: {
+                    content: `Failed to load config: ${error.message}`,
+                    response_metadata: {}
+                }
+            };
+            addMessage(errorMessage);
+
+            alert(`Failed to load config: ${error.message}`);
+        } finally {
+            getConfigBtn.disabled = false;
+            getConfigBtn.innerHTML = '<i class="fas fa-cog"></i> Get Config';
+        }
+    }
+
+    // Display configuration in a modal
+    function displayConfig(configData) {
+        // 移除现有的配置查看器
+        const existingConfigViewer = document.querySelector('.config-viewer');
+        if (existingConfigViewer) {
+            existingConfigViewer.remove();
+        }
+
+        // 创建配置查看器
+        const configViewer = document.createElement('div');
+        configViewer.className = 'config-viewer';
+        configViewer.style.cssText = `
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            max-width: 800px;
+            max-height: 80vh;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        `;
+
+        configViewer.innerHTML = `
+            <div style="
+                padding: 20px;
+                background: #f5f5f5;
+                border-bottom: 1px solid #ddd;
+                display: flex;
+                justify-content: between;
+                align-items: center;
+            ">
+                <h3 style="margin: 0; color: #333;">Agent Configuration</h3>
+                <button class="config-viewer-close" style="
+                    background: none;
+                    border: none;
+                    font-size: 18px;
+                    cursor: pointer;
+                    color: #666;
+                    padding: 5px;
+                " title="Close config viewer">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="config-content" style="
+                padding: 20px;
+                overflow-y: auto;
+                flex: 1;
+                background: white;
+            "></div>
+        `;
+
+        // 创建遮罩层
+        const overlay = document.createElement('div');
+        overlay.className = 'config-overlay';
+        overlay.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+        `;
+
+        // 添加到页面
+        document.body.appendChild(overlay);
+        document.body.appendChild(configViewer);
+
+        const configContent = configViewer.querySelector('.config-content');
+
+        try {
+            // 尝试不同的配置数据结构
+            let configToDisplay = configData;
+
+            // 如果配置数据在特定属性中
+            if (configData.config) {
+                configToDisplay = configData.config;
+            }
+
+            // 如果配置数据在 $defs 中
+            if (configData.$defs && configData.$defs.BaseConfiguration) {
+                configToDisplay = configData.$defs.BaseConfiguration;
+            }
+
+            if (typeof configToDisplay === 'object' && configToDisplay !== null) {
+                if (configToDisplay.properties) {
+                    // 处理 JSON Schema 格式
+                    displayConfigProperties(configContent, configToDisplay.properties, configToDisplay.required || []);
+                } else {
+                    // 处理普通对象格式
+                    displayConfigObject(configContent, configToDisplay);
+                }
+            } else {
+                configContent.innerHTML = `
+                    <div style="color: #666; text-align: center; padding: 40px;">
+                        <i class="fas fa-info-circle" style="font-size: 48px; margin-bottom: 20px;"></i>
+                        <p>No configuration data available or invalid format</p>
+                        <pre style="background: #f5f5f5; padding: 15px; border-radius: 4px; margin-top: 20px; text-align: left; overflow: auto;">${JSON.stringify(configData, null, 2)}</pre>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            console.error('Error displaying config:', error);
+            configContent.innerHTML = `
+                <div style="color: #d32f2f; text-align: center; padding: 40px;">
+                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 20px;"></i>
+                    <p>Error displaying configuration</p>
+                    <pre style="background: #ffebee; padding: 15px; border-radius: 4px; margin-top: 20px; text-align: left; overflow: auto;">${error.message}</pre>
+                </div>
+            `;
+        }
+
+        // 关闭按钮事件
+        const closeBtn = configViewer.querySelector('.config-viewer-close');
+        const closeViewer = () => {
+            configViewer.remove();
+            overlay.remove();
+        };
+
+        closeBtn.addEventListener('click', closeViewer);
+        overlay.addEventListener('click', closeViewer);
+
+        // ESC 键关闭
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                closeViewer();
+                document.removeEventListener('keydown', handleEscape);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+    }
+
+    // 显示配置属性（JSON Schema 格式）
+    function displayConfigProperties(container, properties, requiredFields = []) {
+        if (!properties || Object.keys(properties).length === 0) {
+            container.innerHTML = '<p style="color: #666; text-align: center;">No configuration properties found</p>';
+            return;
+        }
+
+        const configList = document.createElement('div');
+        configList.className = 'config-list';
+        configList.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        `;
+
+        Object.entries(properties).forEach(([key, configItem]) => {
+            if (typeof configItem !== 'object') return;
+
+            const configEntry = document.createElement('div');
+            configEntry.className = 'config-entry';
+            configEntry.style.cssText = `
+                padding: 15px;
+                border: 1px solid #e0e0e0;
+                border-radius: 6px;
+                background: #fafafa;
+            `;
+
+            // 配置项标题行
+            const headerRow = document.createElement('div');
+            headerRow.style.cssText = `
+                display: flex;
+                justify-content: between;
+                align-items: flex-start;
+                margin-bottom: 8px;
+            `;
+
+            const keySection = document.createElement('div');
+            keySection.style.flex = '1';
+
+            // 配置项名称
+            const configKey = document.createElement('div');
+            configKey.className = 'config-key';
+            configKey.style.cssText = `
+                font-weight: bold;
+                color: #1976d2;
+                margin-bottom: 4px;
+                font-size: 16px;
+            `;
+            configKey.textContent = configItem.title || key;
+
+            // 配置项类型
+            if (configItem.type) {
+                const typeBadge = document.createElement('span');
+                typeBadge.className = 'config-type';
+                typeBadge.style.cssText = `
+                    display: inline-block;
+                    background: #e3f2fd;
+                    color: #1976d2;
+                    padding: 2px 8px;
+                    border-radius: 12px;
+                    font-size: 12px;
+                    font-weight: normal;
+                    margin-left: 8px;
+                `;
+                typeBadge.textContent = configItem.type;
+                configKey.appendChild(typeBadge);
+            }
+
+            keySection.appendChild(configKey);
+
+            // 必需标记
+            if (requiredFields.includes(key)) {
+                const requiredBadge = document.createElement('span');
+                requiredBadge.className = 'config-required';
+                requiredBadge.style.cssText = `
+                    display: inline-block;
+                    background: #ffebee;
+                    color: #d32f2f;
+                    padding: 2px 8px;
+                    border-radius: 12px;
+                    font-size: 12px;
+                    font-weight: bold;
+                    margin-left: 8px;
+                `;
+                requiredBadge.textContent = 'REQUIRED';
+                configKey.appendChild(requiredBadge);
+            }
+
+            headerRow.appendChild(keySection);
+
+            // 配置项描述
+            if (configItem.description) {
+                const description = document.createElement('div');
+                description.className = 'config-description';
+                description.style.cssText = `
+                    color: #666;
+                    font-size: 14px;
+                    line-height: 1.4;
+                    margin-bottom: 8px;
+                `;
+                description.textContent = configItem.description;
+                headerRow.appendChild(description);
+            }
+
+            configEntry.appendChild(headerRow);
+
+            // 配置项值
+            const valueSection = document.createElement('div');
+            valueSection.style.cssText = `
+                display: flex;
+                justify-content: between;
+                align-items: center;
+                padding-top: 8px;
+                border-top: 1px solid #e0e0e0;
+            `;
+
+            const valueLabel = document.createElement('span');
+            valueLabel.style.cssText = `
+                font-weight: 500;
+                color: #333;
+                margin-right: 8px;
+            `;
+            valueLabel.textContent = 'Default Value:';
+
+            const configValue = document.createElement('span');
+            configValue.className = 'config-value';
+            configValue.style.cssText = `
+                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+                background: #fff;
+                padding: 4px 8px;
+                border-radius: 4px;
+                border: 1px solid #ddd;
+                flex: 1;
+                word-break: break-all;
+            `;
+
+            // 处理敏感信息
+            if (/API_?KEY|SECRET|PASSWORD|TOKEN/i.test(key)) {
+                configValue.textContent = '••••••••••••••••';
+                configValue.style.color = '#d32f2f';
+                configValue.style.fontWeight = 'bold';
+            } else {
+                configValue.textContent = formatConfigValue(configItem.default);
+            }
+
+            valueSection.appendChild(valueLabel);
+            valueSection.appendChild(configValue);
+            configEntry.appendChild(valueSection);
+
+            // 添加枚举信息
+            if (configItem.enum && configItem.enum.length > 0) {
+                const enumSection = document.createElement('div');
+                enumSection.style.cssText = `
+                    margin-top: 8px;
+                    padding: 8px;
+                    background: #f3e5f5;
+                    border-radius: 4px;
+                    font-size: 12px;
+                `;
+
+                const enumTitle = document.createElement('div');
+                enumTitle.style.cssText = `
+                    font-weight: bold;
+                    color: #7b1fa2;
+                    margin-bottom: 4px;
+                `;
+                enumTitle.textContent = 'Allowed Values:';
+
+                const enumValues = document.createElement('div');
+                enumValues.style.cssText = `
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 4px;
+                `;
+
+                configItem.enum.forEach(value => {
+                    const valueBadge = document.createElement('span');
+                    valueBadge.style.cssText = `
+                        background: #fff;
+                        color: #7b1fa2;
+                        padding: 2px 6px;
+                        border-radius: 10px;
+                        border: 1px solid #ba68c8;
+                        font-size: 11px;
+                    `;
+                    valueBadge.textContent = formatConfigValue(value);
+                    enumValues.appendChild(valueBadge);
+                });
+
+                enumSection.appendChild(enumTitle);
+                enumSection.appendChild(enumValues);
+                configEntry.appendChild(enumSection);
+            }
+
+            configList.appendChild(configEntry);
+        });
+
+        container.appendChild(configList);
+    }
+
+    // 显示配置对象（普通对象格式）
+    function displayConfigObject(container, configObj) {
+        const configList = document.createElement('div');
+        configList.className = 'config-list';
+        configList.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        `;
+
+        Object.entries(configObj).forEach(([key, value]) => {
+            const configEntry = document.createElement('div');
+            configEntry.className = 'config-entry';
+            configEntry.style.cssText = `
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 12px;
+                border: 1px solid #e0e0e0;
+                border-radius: 4px;
+                background: #fafafa;
+            `;
+
+            const configKey = document.createElement('span');
+            configKey.className = 'config-key';
+            configKey.style.cssText = `
+                font-weight: bold;
+                color: #333;
+            `;
+            configKey.textContent = key;
+
+            const configValue = document.createElement('span');
+            configValue.className = 'config-value';
+            configValue.style.cssText = `
+                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+                background: #fff;
+                padding: 4px 8px;
+                border-radius: 4px;
+                border: 1px solid #ddd;
+            `;
+
+            // 处理敏感信息
+            if (/API_?KEY|SECRET|PASSWORD|TOKEN/i.test(key)) {
+                configValue.textContent = '••••••••••••••••';
+                configValue.style.color = '#d32f2f';
+            } else {
+                configValue.textContent = formatConfigValue(value);
+            }
+
+            configEntry.appendChild(configKey);
+            configEntry.appendChild(configValue);
+            configList.appendChild(configEntry);
+        });
+
+        container.appendChild(configList);
+    }
+
+    // 格式化配置值
+    function formatConfigValue(value) {
+        if (value === undefined) return '未设置';
+        if (value === null) return 'null';
+        if (typeof value === 'object') return JSON.stringify(value, null, 2);
+        return String(value);
+    }
+
+    // Initialize
+    function init() {
+        loadGraphs();
+        resetInputForm();
+
+        graphNameInput.addEventListener('change', loadSchema);
+        graphSelect.addEventListener('change', function() {
+            if (this.value) {
+                graphNameInput.value = this.value;
+                loadSchema();
+            }
+        });
+
+        createThreadBtn.addEventListener('click', createThread);
+        connectBtn.addEventListener('click', connectStream);
+        disconnectBtn.addEventListener('click', disconnectStream);
+        clearBtn.addEventListener('click', clearStream);
+        refreshGraphsBtn.addEventListener('click', loadGraphs);
+        getConfigBtn.addEventListener('click', getAgentConfig);
+
+        // Interrupt modal buttons
+        confirmInterruptBtn.addEventListener('click', continueAfterInterrupt);
+        cancelInterruptBtn.addEventListener('click', () => {
+            hideInterruptDialog();
+            currentInterruptData = null;
+            disconnectStream();
+        });
+
+        graphNameInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') createThread();
+        });
+
+        threadIdInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') connectStream();
+        });
+
+        window.addEventListener('beforeunload', () => {
+            if (isConnected) {
+                disconnectStream();
+            }
+        });
+    }
+
+    init();
+});