(function() {
const form = document.getElementById('agentForm');
const statusDiv = document.getElementById('agentStatus');
const responseOutput = document.getElementById('agentResponseOutput');
const responseText = document.getElementById('agentResponseText');
const webhookUrl = 'https://api.agent.ai/v1/agent/gpkkfy5aeleo6vf9/webhook/5bb0490c/async';
const statusUrlBase = 'https://api.agent.ai/v1/agent/gpkkfy5aeleo6vf9/webhook/5bb0490c/status';
// helper so styling is consistent everywhere
function setStatus(message, {error = false} = {}) {
statusDiv.style.fontWeight = 'bold';
statusDiv.style.fontFamily = 'Nunito, sans-serif';
statusDiv.style.color = error ? '#dc3545' : '#FF1493'; // red for errors, hot pink otherwise
statusDiv.textContent = message;
}
form.addEventListener('submit', function(event) {
event.preventDefault();
responseOutput.style.display = 'none';
const statusMessages = ["Analyzing", "Creating Your Guide", "Putting on the Finishing Touches", "Check Your Email"];
setStatus(`${statusMessages[0]}…`); // was "Processing..."
const formData = new FormData(form);
const jsonPayload = JSON.stringify(Object.fromEntries(formData.entries()));
fetch(webhookUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: jsonPayload
})
.then(r => r.json())
.then(data => {
const runId = data.run_id;
if (!runId) throw new Error('No run_id received from server');
pollStatus(runId, statusMessages);
})
.catch(err => setStatus(`Error: ${err.message}`, {error: true}));
});
function pollStatus(runId, statusMessages) {
const startTime = Date.now();
let currentMessageIndex = 0;
const interval = setInterval(() => {
const elapsed = Date.now() - startTime;
if (elapsed > 30000 && currentMessageIndex === 0) {
currentMessageIndex = 1; setStatus(statusMessages[1]);
} else if (elapsed > 120000 && currentMessageIndex === 1) {
currentMessageIndex = 2; setStatus(statusMessages[2]);
}
if (elapsed > 1800000) {
clearInterval(interval);
return setStatus('Request timed out after 30 minutes', {error: true});
}
fetch(`${statusUrlBase}/${runId}`)
.then(response => {
if (response.status === 204) return null;
if (response.status === 200) return response.json();
throw new Error('Unexpected response status');
})
.then(data => {
if (data) {
clearInterval(interval);
setStatus(statusMessages[3]); // "Check Your Email"
setTimeout(() => {
const content = data.response || data.output || data.message || 'No usable content returned';
responseText.innerHTML = content;
responseOutput.style.display = 'block';
setStatus(''); // clear
}, 2000);
}
})
.catch(err => {
clearInterval(interval);
setStatus(`Error: ${err.message}`, {error: true});
});
}, 2000);
}
})();
