Function createStepHTML

apps/visualize-trace/static/js/script.js:622–690

(step, index)

}

function createStepHTML(step, index) {
    const roleClass = step.role === 'user' ? 'user-message' : 
                     step.role === 'tool' ? 'tool-message' : 
                     step.role === 'system' ? 'system-message' : 
                     'assistant-message';
    const agentClass = step.agent.includes('browser') ? 'browser-agent' : '';
    
    // 渲染内容
    const renderedPreview = renderContent(step.content_preview);
    const renderedFullContent = renderContent(step.full_content);
    
    return `
        <div class="execution-step fade-in" data-step-id="${step.step_id}" data-agent="${step.agent}" id="step-${index}">
            <div class="step-header ${roleClass} ${agentClass}" data-toggle="collapse" data-target="#step-content-${index}">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge badge-role badge-${step.role}">${step.role}</span>
                        <span class="badge badge-browser ms-2">${step.agent}</span>
                        ${step.tool_calls.length > 0 ? `<span class="badge bg-warning text-dark ms-2">${step.tool_calls.length} 工具调用</span>` : ''}
                        ${step.browser_session ? `<span class="badge bg-success ms-2">Browser会话</span>` : ''}
                    </div>
                    <div class="d-flex align-items-center">
                        <span class="timestamp me-2">${formatTimestamp(step.timestamp)}</span>
                        <span class="step-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </span>
                    </div>
                </div>
                <div class="content-preview mt-2">
                    <div class="preview-text">
                        ${renderedPreview}
                    </div>
                </div>
            </div>
            
            <div class="step-content collapse" id="step-content-${index}">
                <div class="mb-3">
                    <h6>完整内容:</h6>
                    <div class="rendered-content">${renderedFullContent}</div>
                </div>
                
                ${step.tool_calls.length > 0 ? `
                    <div class="mb-3">
                        <h6>工具调用:</h6>
                        ${step.tool_calls.map(tool => createToolCallHTML(tool)).join('')}
                    </div>
                ` : ''}
                
                ${step.browser_flow && step.browser_flow.length > 0 ? `
                    <div class="mb-3">
                        <h6>Browser会话流程:</h6>
                        <div class="browser-session">
                            <div class="browser-session-header">
                                <i class="fas fa-globe"></i> ${step.browser_session} (${step.browser_flow.length} 步骤)
                            </div>
                            ${step.browser_flow.map(browserStep => createBrowserStepHTML(browserStep, index)).join('')}
                        </div>
                    </div>