modify main.js to English
This commit is contained in:
xiangjinyu
parent
81b9bb3660
commit
110213a29f
410
static/main.js
410
static/main.js
@ -5,7 +5,7 @@ function createTask() {
|
||||
const prompt = promptInput.value.trim();
|
||||
|
||||
if (!prompt) {
|
||||
alert("请输入有效的提示内容");
|
||||
alert("Please enter a valid prompt");
|
||||
promptInput.focus();
|
||||
return;
|
||||
}
|
||||
@ -16,7 +16,7 @@ function createTask() {
|
||||
}
|
||||
|
||||
const container = document.getElementById('task-container');
|
||||
container.innerHTML = '<div class="loading">任务初始化中...</div>';
|
||||
container.innerHTML = '<div class="loading">Initializing task...</div>';
|
||||
document.getElementById('input-container').classList.add('bottom');
|
||||
|
||||
fetch('/tasks', {
|
||||
@ -28,20 +28,20 @@ function createTask() {
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(err => { throw new Error(err.detail || '请求失败') });
|
||||
return response.json().then(err => { throw new Error(err.detail || 'Request failed') });
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (!data.task_id) {
|
||||
throw new Error('无效的任务ID');
|
||||
throw new Error('Invalid task ID');
|
||||
}
|
||||
setupSSE(data.task_id);
|
||||
loadHistory();
|
||||
})
|
||||
.catch(error => {
|
||||
container.innerHTML = `<div class="error">错误: ${error.message}</div>`;
|
||||
console.error('创建任务失败:', error);
|
||||
container.innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
||||
console.error('Failed to create task:', error);
|
||||
});
|
||||
}
|
||||
|
||||
@ -49,13 +49,13 @@ function setupSSE(taskId) {
|
||||
let retryCount = 0;
|
||||
const maxRetries = 3;
|
||||
const retryDelay = 2000;
|
||||
|
||||
|
||||
function connect() {
|
||||
const eventSource = new EventSource(`/tasks/${taskId}/events`);
|
||||
currentEventSource = eventSource;
|
||||
|
||||
const container = document.getElementById('task-container');
|
||||
|
||||
|
||||
let heartbeatTimer = setInterval(() => {
|
||||
container.innerHTML += '<div class="ping">·</div>';
|
||||
}, 5000);
|
||||
@ -67,13 +67,13 @@ function setupSSE(taskId) {
|
||||
updateTaskStatus(task);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('轮询失败:', error);
|
||||
console.error('Polling failed:', error);
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
if (!eventSource._listenersAdded) {
|
||||
eventSource._listenersAdded = true;
|
||||
|
||||
|
||||
let lastResultContent = '';
|
||||
eventSource.addEventListener('status', (event) => {
|
||||
clearInterval(heartbeatTimer);
|
||||
@ -92,9 +92,9 @@ function setupSSE(taskId) {
|
||||
stepContainer = container.querySelector('.step-container');
|
||||
}
|
||||
|
||||
// 保存result内容
|
||||
// Save result content
|
||||
if (data.steps && data.steps.length > 0) {
|
||||
// 遍历所有步骤，找到最后一个result类型
|
||||
// Iterate through all steps, find the last result type
|
||||
for (let i = data.steps.length - 1; i >= 0; i--) {
|
||||
if (data.steps[i].type === 'result') {
|
||||
lastResultContent = data.steps[i].result;
|
||||
@ -116,24 +116,24 @@ function setupSSE(taskId) {
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
|
||||
// Auto-scroll to bottom
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('状态更新失败:', e);
|
||||
console.error('Status update failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加对think事件的处理
|
||||
// Add handler for think event
|
||||
eventSource.addEventListener('think', (event) => {
|
||||
clearInterval(heartbeatTimer);
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
container.querySelector('.loading')?.remove();
|
||||
|
||||
|
||||
let stepContainer = container.querySelector('.step-container');
|
||||
if (!stepContainer) {
|
||||
container.innerHTML = '<div class="step-container"></div>';
|
||||
@ -142,7 +142,7 @@ function setupSSE(taskId) {
|
||||
|
||||
const content = data.result;
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
const step = document.createElement('div');
|
||||
step.className = 'step-item think';
|
||||
step.innerHTML = `
|
||||
@ -151,34 +151,34 @@ function setupSSE(taskId) {
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
stepContainer.appendChild(step);
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 更新任务状态
|
||||
// Update task status
|
||||
fetch(`/tasks/${taskId}`)
|
||||
.then(response => response.json())
|
||||
.then(task => {
|
||||
updateTaskStatus(task);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
console.error('Status update failed:', error);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('思考事件处理失败:', e);
|
||||
console.error('Think event handling failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加对tool事件的处理
|
||||
// Add handler for tool event
|
||||
eventSource.addEventListener('tool', (event) => {
|
||||
clearInterval(heartbeatTimer);
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
container.querySelector('.loading')?.remove();
|
||||
|
||||
|
||||
let stepContainer = container.querySelector('.step-container');
|
||||
if (!stepContainer) {
|
||||
container.innerHTML = '<div class="step-container"></div>';
|
||||
@ -187,7 +187,7 @@ function setupSSE(taskId) {
|
||||
|
||||
const content = data.result;
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
const step = document.createElement('div');
|
||||
step.className = 'step-item tool';
|
||||
step.innerHTML = `
|
||||
@ -196,34 +196,34 @@ function setupSSE(taskId) {
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
stepContainer.appendChild(step);
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 更新任务状态
|
||||
// Update task status
|
||||
fetch(`/tasks/${taskId}`)
|
||||
.then(response => response.json())
|
||||
.then(task => {
|
||||
updateTaskStatus(task);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
console.error('Status update failed:', error);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('工具事件处理失败:', e);
|
||||
console.error('Tool event handling failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加对act事件的处理
|
||||
// Add handler for act event
|
||||
eventSource.addEventListener('act', (event) => {
|
||||
clearInterval(heartbeatTimer);
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
container.querySelector('.loading')?.remove();
|
||||
|
||||
|
||||
let stepContainer = container.querySelector('.step-container');
|
||||
if (!stepContainer) {
|
||||
container.innerHTML = '<div class="step-container"></div>';
|
||||
@ -232,7 +232,7 @@ function setupSSE(taskId) {
|
||||
|
||||
const content = data.result;
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
const step = document.createElement('div');
|
||||
step.className = 'step-item act';
|
||||
step.innerHTML = `
|
||||
@ -241,35 +241,34 @@ function setupSSE(taskId) {
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
stepContainer.appendChild(step);
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 更新任务状态
|
||||
// Update task status
|
||||
fetch(`/tasks/${taskId}`)
|
||||
.then(response => response.json())
|
||||
.then(task => {
|
||||
updateTaskStatus(task);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
console.error('Status update failed:', error);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('执行事件处理失败:', e);
|
||||
console.error('Act event handling failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加对run事件的处理
|
||||
// 添加对log事件的处理
|
||||
// Add handler for log event
|
||||
eventSource.addEventListener('log', (event) => {
|
||||
clearInterval(heartbeatTimer);
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
container.querySelector('.loading')?.remove();
|
||||
|
||||
|
||||
let stepContainer = container.querySelector('.step-container');
|
||||
if (!stepContainer) {
|
||||
container.innerHTML = '<div class="step-container"></div>';
|
||||
@ -278,7 +277,7 @@ function setupSSE(taskId) {
|
||||
|
||||
const content = data.result;
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
const step = document.createElement('div');
|
||||
step.className = 'step-item log';
|
||||
step.innerHTML = `
|
||||
@ -287,24 +286,24 @@ function setupSSE(taskId) {
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
stepContainer.appendChild(step);
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 更新任务状态
|
||||
// Update task status
|
||||
fetch(`/tasks/${taskId}`)
|
||||
.then(response => response.json())
|
||||
.then(task => {
|
||||
updateTaskStatus(task);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
console.error('Status update failed:', error);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('日志事件处理失败:', e);
|
||||
console.error('Log event handling failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
@ -313,7 +312,7 @@ function setupSSE(taskId) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
container.querySelector('.loading')?.remove();
|
||||
|
||||
|
||||
let stepContainer = container.querySelector('.step-container');
|
||||
if (!stepContainer) {
|
||||
container.innerHTML = '<div class="step-container"></div>';
|
||||
@ -322,7 +321,7 @@ function setupSSE(taskId) {
|
||||
|
||||
const content = data.result;
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
const step = document.createElement('div');
|
||||
step.className = 'step-item run';
|
||||
step.innerHTML = `
|
||||
@ -331,24 +330,24 @@ function setupSSE(taskId) {
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
stepContainer.appendChild(step);
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// 更新任务状态
|
||||
// Update task status
|
||||
fetch(`/tasks/${taskId}`)
|
||||
.then(response => response.json())
|
||||
.then(task => {
|
||||
updateTaskStatus(task);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('状态更新失败:', error);
|
||||
console.error('Status update failed:', error);
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('运行事件处理失败:', e);
|
||||
console.error('Run event handling failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
@ -363,35 +362,35 @@ function setupSSE(taskId) {
|
||||
container.innerHTML = '<div class="step-container"></div>';
|
||||
stepContainer = container.querySelector('.step-container');
|
||||
}
|
||||
|
||||
|
||||
// Create new step element
|
||||
const step = document.createElement('div');
|
||||
step.className = `step-item ${data.type || 'step'}`;
|
||||
|
||||
|
||||
// Format content and timestamp
|
||||
const content = data.result;
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
|
||||
step.innerHTML = `
|
||||
<div class="log-line ${data.type || 'info'}">
|
||||
<span class="log-prefix">${getEventIcon(data.type)} [${timestamp}] ${getEventLabel(data.type)}:</span>
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
// Add step to container with animation
|
||||
stepContainer.prepend(step);
|
||||
setTimeout(() => {
|
||||
step.classList.add('show');
|
||||
}, 10);
|
||||
|
||||
|
||||
// Auto-scroll to bottom
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('消息处理失败:', e);
|
||||
console.error('Message handling failed:', e);
|
||||
}
|
||||
});
|
||||
|
||||
@ -403,13 +402,13 @@ function setupSSE(taskId) {
|
||||
clearInterval(pollInterval);
|
||||
container.innerHTML += `
|
||||
<div class="complete">
|
||||
<div>✅ 任务完成</div>
|
||||
<div>✅ Task completed</div>
|
||||
<pre>${lastResultContent}</pre>
|
||||
</div>
|
||||
`;
|
||||
eventSource.close();
|
||||
currentEventSource = null;
|
||||
lastResultContent = ''; // 清空结果内容
|
||||
lastResultContent = ''; // Clear result content
|
||||
});
|
||||
|
||||
eventSource.addEventListener('error', (event) => {
|
||||
@ -419,17 +418,17 @@ function setupSSE(taskId) {
|
||||
const data = JSON.parse(event.data);
|
||||
container.innerHTML += `
|
||||
<div class="error">
|
||||
❌ 错误: ${data.message}
|
||||
❌ Error: ${data.message}
|
||||
</div>
|
||||
`;
|
||||
eventSource.close();
|
||||
currentEventSource = null;
|
||||
} catch (e) {
|
||||
console.error('错误处理失败:', e);
|
||||
console.error('Error handling failed:', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
@ -439,30 +438,30 @@ function setupSSE(taskId) {
|
||||
if (isTaskComplete) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.error('SSE连接错误:', err);
|
||||
|
||||
console.error('SSE connection error:', err);
|
||||
clearInterval(heartbeatTimer);
|
||||
clearInterval(pollInterval);
|
||||
eventSource.close();
|
||||
|
||||
|
||||
if (retryCount < maxRetries) {
|
||||
retryCount++;
|
||||
container.innerHTML += `
|
||||
<div class="warning">
|
||||
⚠ 连接中断，${retryDelay/1000}秒后重试 (${retryCount}/${maxRetries})...
|
||||
⚠ Connection lost, retrying in ${retryDelay/1000} seconds (${retryCount}/${maxRetries})...
|
||||
</div>
|
||||
`;
|
||||
setTimeout(connect, retryDelay);
|
||||
} else {
|
||||
container.innerHTML += `
|
||||
<div class="error">
|
||||
⚠ 连接中断，请尝试刷新页面
|
||||
⚠ Connection lost, please try refreshing the page
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
connect();
|
||||
}
|
||||
|
||||
@ -474,112 +473,223 @@ function getEventIcon(eventType) {
|
||||
case 'result': return '🏁';
|
||||
case 'error': return '❌';
|
||||
case 'complete': return '✅';
|
||||
case 'warning': return '⚠️';
|
||||
case 'log': return '📝';
|
||||
default: return '⚡';
|
||||
case 'run': return '⚙️';
|
||||
default: return 'ℹ️';
|
||||
}
|
||||
}
|
||||
|
||||
function getEventLabel(eventType) {
|
||||
switch(eventType) {
|
||||
case 'think': return '思考';
|
||||
case 'tool': return '工具执行';
|
||||
case 'act': return '执行';
|
||||
case 'result': return '结果';
|
||||
case 'error': return '错误';
|
||||
case 'complete': return '完成';
|
||||
case 'warning': return '警告';
|
||||
case 'log': return '日志';
|
||||
default: return '步骤';
|
||||
case 'think': return 'Thinking';
|
||||
case 'tool': return 'Using Tool';
|
||||
case 'act': return 'Action';
|
||||
case 'result': return 'Result';
|
||||
case 'error': return 'Error';
|
||||
case 'complete': return 'Complete';
|
||||
case 'log': return 'Log';
|
||||
case 'run': return 'Running';
|
||||
default: return 'Info';
|
||||
}
|
||||
}
|
||||
|
||||
function formatContent(content) {
|
||||
// Remove timestamp and log level prefixes
|
||||
content = content.replace(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} \| [A-Z]+\s*\| /gm, '');
|
||||
// Format the remaining content
|
||||
return content
|
||||
.replace(/\n/g, '<br>')
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/✨ Manus's thoughts:/g, '')
|
||||
.replace(/🛠️ Manus selected/g, '')
|
||||
.replace(/🧰 Tools being prepared:/g, '')
|
||||
.replace(/🔧 Activating tool:/g, '')
|
||||
.replace(/🎯 Tool/g, '')
|
||||
.replace(/📝 Oops!/g, '')
|
||||
.replace(/🏁 Special tool/g, '');
|
||||
}
|
||||
|
||||
function updateTaskStatus(task) {
|
||||
const taskCard = document.querySelector(`.task-card[data-task-id="${task.id}"]`);
|
||||
if (taskCard) {
|
||||
const statusEl = taskCard.querySelector('.task-meta .status');
|
||||
if (statusEl) {
|
||||
statusEl.className = `status-${task.status ? task.status.toLowerCase() : 'unknown'}`;
|
||||
statusEl.textContent = task.status || '未知状态';
|
||||
}
|
||||
const statusBar = document.getElementById('status-bar');
|
||||
if (!statusBar) return;
|
||||
|
||||
if (task.status === 'completed') {
|
||||
statusBar.innerHTML = `<span class="status-complete">✅ Task completed</span>`;
|
||||
} else if (task.status === 'failed') {
|
||||
statusBar.innerHTML = `<span class="status-error">❌ Task failed: ${task.error || 'Unknown error'}</span>`;
|
||||
} else {
|
||||
statusBar.innerHTML = `<span class="status-running">⚙️ Task running: ${task.status}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
function loadHistory() {
|
||||
fetch('/tasks')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.text().then(text => {
|
||||
throw new Error(`请求失败: ${response.status} - ${text.substring(0, 100)}`);
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load history');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(tasks => {
|
||||
const historyContainer = document.getElementById('history-container');
|
||||
if (!historyContainer) return;
|
||||
|
||||
historyContainer.innerHTML = '';
|
||||
|
||||
if (tasks.length === 0) {
|
||||
historyContainer.innerHTML = '<div class="history-empty">No recent tasks</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const historyList = document.createElement('div');
|
||||
historyList.className = 'history-list';
|
||||
|
||||
tasks.forEach(task => {
|
||||
const taskItem = document.createElement('div');
|
||||
taskItem.className = `history-item ${task.status}`;
|
||||
taskItem.innerHTML = `
|
||||
<div class="history-prompt">${task.prompt}</div>
|
||||
<div class="history-meta">
|
||||
<span class="history-time">${new Date(task.created_at).toLocaleString()}</span>
|
||||
<span class="history-status">${getStatusIcon(task.status)}</span>
|
||||
</div>
|
||||
`;
|
||||
taskItem.addEventListener('click', () => {
|
||||
loadTask(task.id);
|
||||
});
|
||||
historyList.appendChild(taskItem);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(tasks => {
|
||||
const listContainer = document.getElementById('task-list');
|
||||
listContainer.innerHTML = tasks.map(task => `
|
||||
<div class="task-card" data-task-id="${task.id}">
|
||||
<div>${task.prompt}</div>
|
||||
<div class="task-meta">
|
||||
${new Date(task.created_at).toLocaleString()} -
|
||||
<span class="status status-${task.status ? task.status.toLowerCase() : 'unknown'}">
|
||||
${task.status || '未知状态'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载历史记录失败:', error);
|
||||
const listContainer = document.getElementById('task-list');
|
||||
listContainer.innerHTML = `<div class="error">加载失败: ${error.message}</div>`;
|
||||
});
|
||||
|
||||
historyContainer.appendChild(historyList);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Failed to load history:', error);
|
||||
const historyContainer = document.getElementById('history-container');
|
||||
if (historyContainer) {
|
||||
historyContainer.innerHTML = `<div class="error">Failed to load history: ${error.message}</div>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
function getStatusIcon(status) {
|
||||
switch(status) {
|
||||
case 'completed': return '✅';
|
||||
case 'failed': return '❌';
|
||||
case 'running': return '⚙️';
|
||||
default: return '⏳';
|
||||
}
|
||||
}
|
||||
|
||||
function loadTask(taskId) {
|
||||
if (currentEventSource) {
|
||||
currentEventSource.close();
|
||||
currentEventSource = null;
|
||||
}
|
||||
|
||||
const container = document.getElementById('task-container');
|
||||
container.innerHTML = '<div class="loading">Loading task...</div>';
|
||||
document.getElementById('input-container').classList.add('bottom');
|
||||
|
||||
fetch(`/tasks/${taskId}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load task');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(task => {
|
||||
if (task.status === 'running') {
|
||||
setupSSE(taskId);
|
||||
} else {
|
||||
displayTask(task);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Failed to load task:', error);
|
||||
container.innerHTML = `<div class="error">Failed to load task: ${error.message}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
function displayTask(task) {
|
||||
const container = document.getElementById('task-container');
|
||||
container.innerHTML = '';
|
||||
container.classList.add('active');
|
||||
|
||||
const welcomeMessage = document.querySelector('.welcome-message');
|
||||
if (welcomeMessage) {
|
||||
welcomeMessage.style.display = 'flex';
|
||||
welcomeMessage.style.display = 'none';
|
||||
}
|
||||
|
||||
// 监听任务容器显示状态
|
||||
const taskContainer = document.getElementById('task-container');
|
||||
if (taskContainer) {
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.attributeName === 'class') {
|
||||
const welcomeMessage = document.querySelector('.welcome-message');
|
||||
if (taskContainer.classList.contains('active')) {
|
||||
if (welcomeMessage) {
|
||||
welcomeMessage.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
if (welcomeMessage) {
|
||||
welcomeMessage.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const stepContainer = document.createElement('div');
|
||||
stepContainer.className = 'step-container';
|
||||
|
||||
if (task.steps && task.steps.length > 0) {
|
||||
task.steps.forEach(step => {
|
||||
const stepItem = document.createElement('div');
|
||||
stepItem.className = `step-item ${step.type || 'step'}`;
|
||||
|
||||
const content = step.result;
|
||||
const timestamp = new Date(step.timestamp || task.created_at).toLocaleTimeString();
|
||||
|
||||
stepItem.innerHTML = `
|
||||
<div class="log-line">
|
||||
<span class="log-prefix">${getEventIcon(step.type)} [${timestamp}] ${getEventLabel(step.type)}:</span>
|
||||
<pre>${content}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
stepContainer.appendChild(stepItem);
|
||||
});
|
||||
|
||||
observer.observe(taskContainer, {
|
||||
attributes: true
|
||||
} else {
|
||||
stepContainer.innerHTML = '<div class="no-steps">No steps recorded for this task</div>';
|
||||
}
|
||||
|
||||
container.appendChild(stepContainer);
|
||||
|
||||
if (task.status === 'completed') {
|
||||
let lastResultContent = '';
|
||||
if (task.steps && task.steps.length > 0) {
|
||||
for (let i = task.steps.length - 1; i >= 0; i--) {
|
||||
if (task.steps[i].type === 'result') {
|
||||
lastResultContent = task.steps[i].result;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
container.innerHTML += `
|
||||
<div class="complete">
|
||||
<div>✅ Task completed</div>
|
||||
<pre>${lastResultContent}</pre>
|
||||
</div>
|
||||
`;
|
||||
} else if (task.status === 'failed') {
|
||||
container.innerHTML += `
|
||||
<div class="error">
|
||||
❌ Error: ${task.error || 'Unknown error'}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
updateTaskStatus(task);
|
||||
}
|
||||
|
||||
// Initialize the app when the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadHistory();
|
||||
|
||||
// Set up event listeners
|
||||
document.getElementById('create-task-btn').addEventListener('click', createTask);
|
||||
document.getElementById('prompt-input').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
createTask();
|
||||
}
|
||||
});
|
||||
|
||||
// Show history button functionality
|
||||
const historyToggle = document.getElementById('history-toggle');
|
||||
if (historyToggle) {
|
||||
historyToggle.addEventListener('click', () => {
|
||||
const historyPanel = document.getElementById('history-panel');
|
||||
if (historyPanel) {
|
||||
historyPanel.classList.toggle('open');
|
||||
historyToggle.classList.toggle('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Clear button functionality
|
||||
const clearButton = document.getElementById('clear-btn');
|
||||
if (clearButton) {
|
||||
clearButton.addEventListener('click', () => {
|
||||
document.getElementById('prompt-input').value = '';
|
||||
document.getElementById('prompt-input').focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user