// ---------- n8n Developer Control Panel ---------- const N8N_EVENTS = [ "call.completed", "call.escalated", "appointment.booked", "lead.captured", "payment.promised", "custom.event", ]; const DEFAULT_PAYLOAD = { phoneNumber: "60123456789", contactId: "contact_demo_001", roomName: "voxpro-room-001", transcript: "Customer requested a callback tomorrow at 3 PM.", reply: "Confirmed, we will arrange that for you.", callDurationMs: 180000, outcome: "follow_up_required", }; // ── Trigger event metadata ──────────────────────────────────────────────── const TRIGGER_META = { "call.completed": { icon: "check", label: "Call completed", color: "var(--ok)", useCase: "Send summary, log to CRM, close ticket", when: "The call ends successfully", snippet: `When the conversation concludes, include [[automation:call.completed]] at the end of your final response.`, example: `Thank you for calling, have a great day. [[automation:call.completed]]`, }, "call.escalated": { icon: "phone", label: "Call escalated", color: "#f59e0b", useCase: "Alert human agent, create support ticket, notify team", when: "Customer requests a human agent or supervisor", snippet: `When the customer asks to speak with a human agent or supervisor, include [[automation:call.escalated]] in your response.`, example: `I'll transfer you to a human agent now. Please hold. [[automation:call.escalated]]`, }, "appointment.booked": { icon: "calendar", label: "Appointment booked", color: "#6366f1", useCase: "Add to calendar, send confirmation SMS/email, notify staff", when: "Customer confirms a booking or appointment time", snippet: `When the customer confirms an appointment date and time, include [[automation:appointment.booked]] in your response.`, example: `Great, you're booked for Thursday at 2 PM. See you then! [[automation:appointment.booked]]`, }, "lead.captured": { icon: "user", label: "Lead captured", color: "#8b5cf6", useCase: "Create CRM contact, notify sales, start drip campaign", when: "Customer expresses clear interest or requests follow-up", snippet: `When the customer shows clear interest or requests a callback or more information, include [[automation:lead.captured]] in your response.`, example: `I'll have a specialist reach out to you within 24 hours. [[automation:lead.captured]]`, }, "payment.promised": { icon: "wallet", label: "Payment promised", color: "#10b981", useCase: "Log commitment, schedule payment reminder, update debt record", when: "Customer commits to a specific payment date", snippet: `When the customer commits to a payment date, include [[automation:payment.promised]] in your response.`, example: `I've noted your payment commitment for the 15th. We'll send a reminder. [[automation:payment.promised]]`, }, "custom.event": { icon: "settings", label: "Custom event", color: "var(--a)", useCase: "Any custom workflow — fully flexible", when: "Any condition you define in the system prompt", snippet: `When [describe your condition here], include [[automation:custom.event]] in your response.`, example: `Your request has been logged and our team will follow up. [[automation:custom.event]]`, }, }; const MASTER_SNIPPET = `## Automation triggers When certain outcomes occur during the conversation, include the matching trigger token in your response. These tokens are silent — the customer never hears them. Available triggers: - [[automation:appointment.booked]] — customer confirmed an appointment - [[automation:lead.captured]] — customer expressed interest or requested follow-up - [[automation:payment.promised]] — customer committed to a payment date - [[automation:call.escalated]] — customer requested a human agent - [[automation:call.completed]] — successful end of call - [[automation:custom.event]] — [replace with your custom condition] Rules: - Include the token at the end of the sentence where the outcome occurs - Only use one trigger token per response turn - Never explain the token to the customer`; // ── Automation guide component ───────────────────────────────────────────── function AutomationsGuide({ automations, n8nAutomations, autoLoading, showNewAuto, setShowNewAuto, newAuto, setNewAuto, saveAutomation, deleteAutomation, setTab, setFireEvent, assistantList }) { const [guideEvent, setGuideEvent] = React.useState("call.completed"); const [copied, setCopied] = React.useState(null); const [payloadOpen, setPayloadOpen] = React.useState(false); function copy(text, key) { navigator.clipboard.writeText(text).then(() => { setCopied(key); setTimeout(() => setCopied(null), 2000); }); } const meta = TRIGGER_META[guideEvent] || TRIGGER_META["custom.event"]; const SAMPLE_PAYLOAD = { meta: { automationId: "auto_abc123", automationName: "Send WhatsApp after call", triggerEvent: guideEvent, occurredAt: new Date().toISOString(), }, data: { phoneNumber: "+60123456789", transcript: "Customer confirmed appointment for Thursday 2pm.", reply: "Great, you're booked for Thursday at 2 PM. [[automation:" + guideEvent + "]]", outcome: guideEvent, expectedPaymentDate: guideEvent === "payment.promised" ? "2026-06-20" : null, callDurationMs: 64000, }, assistant: { id: "asst_xyz", name: "Booking Assistant" }, resolvedMatchContext: { matchedPhoneNumber: "+60123456789", matchedName: "Ahmad Fauzi", matchedNric: null, }, }; return (
{/* ── Left column ── */}
{/* Concept banner */}
How it works: Your voice AI includes a silent trigger token in its reply → VoxPro detects it → fires the matching n8n webhook → your n8n workflow runs (send WhatsApp, update CRM, book calendar, etc.)
{/* Automations list */} setShowNewAuto(true)}>New automation }> {autoLoading &&
Loading…
} {!autoLoading && automations.length === 0 && (
No automations yet
Add your first automation below to connect n8n to your voice assistant.
)} {!autoLoading && automations.length > 0 && (
{automations.map(a => { const m = TRIGGER_META[a.triggerEvent] || {}; return (
{a.name} {a.triggerEvent}
{a.webhookUrl}
{ setTab("fire"); setFireEvent(a.triggerEvent); }}>Test deleteAutomation(a.id)} />
); })}
)} {/* New automation inline form */} {showNewAuto && ( setNewAuto(d => ({ ...d, name: e.target.value }))} placeholder="e.g. Send WhatsApp after appointment booked" /> setNewAuto(d => ({ ...d, webhookUrl: e.target.value }))} placeholder="http://localhost:5678/webhook/xxxxxxxx" />
{assistantList.length === 0 && No assistants found} {assistantList.map(a => ( ))} {(newAuto.assistantIds || []).length > 0 && ( Only fires for {(newAuto.assistantIds || []).length} selected assistant(s) )}
{newAuto.triggerEvent && (
System prompt snippet to add to your assistant copy(TRIGGER_META[newAuto.triggerEvent]?.snippet || "", "form-snippet")}> {copied === "form-snippet" ? "Copied!" : "Copy"} 
                  {TRIGGER_META[newAuto.triggerEvent]?.snippet}
)}
Save automation setShowNewAuto(false)}>Cancel
)} {/* System prompt snippets */} {/* Master snippet */}
Master snippet — enables all triggers at once copy(MASTER_SNIPPET, "master")}> {copied === "master" ? "Copied!" : "Copy all"} 
              {MASTER_SNIPPET}
{/* Per-event snippets */}
{N8N_EVENTS.map(ev => { const m = TRIGGER_META[ev]; return (
{m.label} {m.useCase} copy(m.snippet, ev)}> {copied === ev ? "Copied!" : "Copy"}
Snippet
{m.snippet}
Example AI response
{m.example}
); })}
{/* Payload reference */} setPayloadOpen(o => !o)}>{payloadOpen ? "Hide" : "Show"}} >
Select event to preview payload:
{payloadOpen && (
n8n receives this JSON on every trigger copy(JSON.stringify(SAMPLE_PAYLOAD, null, 2), "payload")}> {copied === "payload" ? "Copied!" : "Copy JSON"} 
                {JSON.stringify(SAMPLE_PAYLOAD, null, 2)}
{[ { path: "meta.triggerEvent", desc: "Which event fired (e.g. appointment.booked)" }, { path: "meta.occurredAt", desc: "ISO timestamp of when the trigger fired" }, { path: "data.phoneNumber", desc: "Customer phone number (+60 format)" }, { path: "data.transcript", desc: "Full conversation text up to this point" }, { path: "data.reply", desc: "The AI's response that contained the trigger token" }, { path: "data.outcome", desc: "Same as triggerEvent — use in n8n conditions" }, { path: "data.expectedPaymentDate", desc: "ISO date if a payment was promised (null otherwise)" }, { path: "data.callDurationMs", desc: "Call duration in milliseconds" }, { path: "assistant.name", desc: "Which VoxPro assistant triggered this" }, { path: "resolvedMatchContext.matchedPhoneNumber", desc: "Normalised phone matched against your dataset" }, { path: "resolvedMatchContext.matchedName", desc: "Customer name from matched CSV row (if any)" }, ].map(r => (
{r.path} {r.desc}
))}
)}
{/* ── Right column: sticky setup guide ── */}
{[ { n: 1, title: "Create a webhook in n8n", body: "Open n8n → New workflow → search for Webhook → set Method to POST → click Listen for test event → copy the Test URL.", }, { n: 2, title: "Add automation in VoxPro", body: "Click New automation above → paste the webhook URL → choose your trigger event → save.", }, { n: 3, title: "Add trigger to assistant system prompt", body: "Open the assistant → Prompt tab → paste the matching snippet from the left. The AI will include the token when the condition is met.", }, { n: 4, title: "Test the full flow", body: "Go to the Test Fire tab → fire the event → check n8n for the incoming request → build the rest of your workflow from there.", }, ].map(s => (
{s.n}
{s.title}
{s.body}
))}

You add a token like [[automation:appointment.booked]] to the assistant's system prompt instructions.

When the AI detects that condition is met, it includes the token silently in its reply. The customer never hears it.

VoxPro strips the token before TTS, detects it, and fires the matching webhook to n8n immediately.
); } const StatusDot = ({ online }) => ( ); // ── Main view ───────────────────────────────────────────────────────────── const N8nView = () => { const [tab, setTab] = React.useState("status"); const [status, setStatus] = React.useState(null); const [workflows, setWorkflows] = React.useState(null); const [wfLoading, setWfLoading] = React.useState(false); const [executions, setExecutions] = React.useState(null); const [exLoading, setExLoading] = React.useState(false); const [automations, setAutomations] = React.useState([]); const [autoLoading, setAutoLoading] = React.useState(false); const [showNewAuto, setShowNewAuto] = React.useState(false); const [newAuto, setNewAuto] = React.useState({ name: "", webhookUrl: "", triggerEvent: "call.completed", assistantIds: [], billingCategory: "" }); const [assistantList, setAssistantList] = React.useState([]); const [fireEvent, setFireEvent] = React.useState("call.completed"); const [firePayload, setFirePayload] = React.useState(JSON.stringify(DEFAULT_PAYLOAD, null, 2)); const [firing, setFiring] = React.useState(false); const [fireResult, setFireResult] = React.useState(null); const [starting, setStarting] = React.useState(false); const [managed, setManaged] = React.useState(false); // Poll status every 8s (faster while starting) React.useEffect(() => { function poll() { voxApiOptional("/n8n/status", { online: false, url: "http://localhost:5678", hasApiKey: false }) .then(s => { setStatus(s); if (s.online && starting) setStarting(false); }); } poll(); const id = setInterval(poll, starting ? 2000 : 8000); return () => clearInterval(id); }, [starting]); // Sync managed state on mount React.useEffect(() => { voxApiOptional("/n8n/process", { managed: false }).then(d => setManaged(!!d.managed)); voxApiOptional("/assistants", { assistants: [] }).then(d => setAssistantList(Array.isArray(d.assistants) ? d.assistants : [])); }, []); async function startN8n() { setStarting(true); try { await voxApiOptional("/n8n/start", { ok: false }, { method: "POST" }); setManaged(true); } catch { setStarting(false); } } async function stopN8n() { await voxApiOptional("/n8n/stop", {}, { method: "POST" }); setManaged(false); setStatus(s => s ? { ...s, online: false } : s); } // Load workflows when tab switches to workflows React.useEffect(() => { if (tab !== "workflows" || workflows !== null) return; setWfLoading(true); voxApiOptional("/n8n/workflows", null) .then(d => setWorkflows(d)) .finally(() => setWfLoading(false)); }, [tab]); // Load executions when tab switches to executions React.useEffect(() => { if (tab !== "executions") return; setExLoading(true); voxApiOptional("/n8n/executions?limit=30", null) .then(d => setExecutions(d)) .finally(() => setExLoading(false)); }, [tab]); // Load automations (VoxPro webhooks) React.useEffect(() => { if (tab !== "automations" && tab !== "fire") return; if (automations.length) return; setAutoLoading(true); voxApiOptional("/automations/config", { automations: [] }) .then(d => setAutomations(d.automations || [])) .finally(() => setAutoLoading(false)); }, [tab]); async function toggleWorkflow(wf) { try { const updated = await voxApi(`/n8n/workflows/${wf.id}`, { method: "PATCH", body: JSON.stringify({ active: !wf.active }), }); setWorkflows(prev => ({ ...prev, data: (prev.data || []).map(w => w.id === wf.id ? { ...w, active: updated.active } : w), })); } catch (e) { alert("Failed to toggle workflow: " + e.message); } } async function saveAutomation() { if (!newAuto.name || !newAuto.webhookUrl) return; try { const saved = await voxApi("/automations/config", { method: "POST", body: JSON.stringify(newAuto) }); setAutomations(a => [...a, saved.automation || saved]); setShowNewAuto(false); setNewAuto({ name: "", webhookUrl: "", triggerEvent: "call.completed", assistantIds: [], billingCategory: "" }); } catch (e) { alert("Save failed: " + e.message); } } async function deleteAutomation(id) { if (!confirm("Delete this automation?")) return; try { await voxApi(`/automations/config/${id}`, { method: "DELETE" }); setAutomations(a => a.filter(x => x.id !== id)); } catch (e) { alert("Delete failed: " + e.message); } } async function fireEventNow() { let parsed = {}; try { parsed = JSON.parse(firePayload); } catch { alert("Invalid JSON payload"); return; } setFiring(true); setFireResult(null); try { const res = await voxApi("/automations/trigger", { method: "POST", body: JSON.stringify({ triggerEvent: fireEvent, payload: parsed }), }); setFireResult(res); } catch (e) { setFireResult({ error: e.message }); } finally { setFiring(false); } } function refreshWorkflows() { setWorkflows(null); setWfLoading(true); voxApiOptional("/n8n/workflows", null) .then(d => setWorkflows(d)) .finally(() => setWfLoading(false)); } function refreshExecutions() { setExLoading(true); voxApiOptional("/n8n/executions?limit=30", null) .then(d => setExecutions(d)) .finally(() => setExLoading(false)); } const n8nAutomations = automations.filter(a => a.webhookUrl && (a.webhookUrl.includes("localhost:5678") || a.webhookUrl.includes("webhook/")) ); return (
{/* Page header */}

n8n Automation

{status === null ? "Checking connection…" : ( {status.online ? `Connected · ${status.url}` : `Offline · ${status.url}`} {status.online && !status.hasApiKey && ( No API key — workflows unavailable )} )}
{status?.online && ( window.open("http://47.250.58.1:5678/workflow/5rKUFgZT6NMggwAb", "_blank")}> Open n8n UI )}
{/* ── Overview ───────────────────────────────────────────── */} {tab === "status" && (
Status {status === null ? "Checking…" : status.online ? "Online" : "Offline"} URL {status?.url || "http://localhost:5678"} API Key {status?.hasApiKey ? configured : not set}
{!status?.online && (
Start n8n
{starting ? (
Starting n8n… this can take 10–20 seconds
) : (
Start n8n
Or run manually in a terminal: npx n8n
)}
)} {status?.online && managed && ( Stop n8n )} {status?.online && !status?.hasApiKey && (
Add API key to unlock Workflows tab
  1. Open n8n UI → Settings → n8n API
  2. Click Create an API Key, copy it
  3. Add N8N_API_KEY=your_key to your .env
  4. Restart VoxPro backend
)}
  1. In n8n, create a new workflow
  2. Add a Webhook trigger node → copy the webhook URL
  3. Go to VoxPro → n8n tab → Automations → New automation
  4. Paste the n8n webhook URL, choose a trigger event (e.g. call.completed)
  5. Use the Test Fire tab to send a test event — verify it arrives in n8n
  6. Build your n8n workflow from there (send WhatsApp, update CRM, etc.)
{N8N_EVENTS.map(ev => ( {ev} ))}
{[ { k: "N8N_URL", v: "http://localhost:5678", desc: "n8n base URL" }, { k: "N8N_API_KEY", v: "— not set —", desc: "For Workflows + Executions tabs" }, ].map(row => (
{row.k}
{row.v}
{row.desc}
))}
)} {/* ── Workflows ──────────────────────────────────────────── */} {tab === "workflows" && (
Refresh
{wfLoading && (
Loading workflows…
 )} {!wfLoading && workflows === null && (
Could not load workflows
n8n may be offline or API key is missing.
 )} {!wfLoading && workflows?.error && (
{workflows.error}
Set N8N_API_KEY in your .env to use this tab.
 )} {!wfLoading && workflows?.data && ( <> {workflows.data.length === 0 ? (
No workflows yet
Open n8n and create your first workflow.
window.open(status?.url || "http://localhost:5678", "_blank")}> Open n8n
) : (
{workflows.data.map(wf => { const triggerNode = (wf.nodes || []).find(n => n.type?.includes("trigger") || n.type?.includes("webhook") ); return ( ); })}
Workflow Trigger Nodes Status
{wf.name}
id: {wf.id}
 {triggerNode?.type?.split(".").pop() || "—"} {(wf.nodes || []).length} nodes {wf.active ? "active" : "inactive"}
toggleWorkflow(wf)} /> window.open(`${status?.url || "http://localhost:5678"}/workflow/${wf.id}`, "_blank")} />
)} )}
)} {/* ── Executions ─────────────────────────────────────────── */} {tab === "executions" && (
Refresh
{exLoading && (
Loading executions…
 )} {!exLoading && executions === null && (
Could not load executions
n8n may be offline or API key is missing.
 )} {!exLoading && executions?.data && ( executions.data.length === 0 ? (
No executions yet
Fire an event from the Test Fire tab to trigger a workflow.
 ) : (
{executions.data.map(ex => { const dur = ex.stoppedAt && ex.startedAt ? Math.round((new Date(ex.stoppedAt) - new Date(ex.startedAt)) / 1000) : null; return ( ); })}
IDWorkflowStatusDurationStarted
{ex.id} {ex.workflowData?.name || ex.workflowId || "—"} {ex.status || "—"} {dur != null ? `${dur}s` : "—"} {ex.startedAt ? fmtDate(ex.startedAt) : "—"}
) )}
)} {/* ── VoxPro → n8n Automations ───────────────────────────── */} {tab === "automations" && ( )} {/* ── Test Fire ──────────────────────────────────────────── */} {tab === "fire" && (