// ============================================================================ // public/features/calls/dialer.jsx — live AI Dialer // ---------------------------------------------------------------------------- // Pick an AI model (Hidrogen / OpenAI / Gemini …), write the call prompt, // enter a number, and dial. The call goes out over the tenant's GSM, the AI // talks two-way with the callee, and the transcript streams in live (polled // from GET /api/calls/live/:uuid). Hang up any time. // ============================================================================ function DialerScreen() { const [models, setModels] = React.useState([]); const [voices, setVoices] = React.useState({}); const [form, setForm] = React.useState({ number: "", model: "", voice: "", greeting: "Hello! This is an AI assistant calling. How are you today?", systemPrompt: "You are a friendly, concise AI calling assistant. Speak naturally, listen, and keep replies short.", }); const [call, setCall] = React.useState(null); // { uuid, code } const [live, setLive] = React.useState(null); // { call, transcript[], lastEvent } const [dialing, setDialing] = React.useState(false); const [err, setErr] = React.useState(null); const pollRef = React.useRef(null); const transcriptEndRef = React.useRef(null); // Load available models once. React.useEffect(() => { VoaisAPI.get("/api/flows/test/models").then(r => { if (r.ok && r.data?.ok) { const ms = r.data.models || []; setModels(ms); setVoices(r.data.voices || {}); // default to first available model, else first model const def = ms.find(m => m.available) || ms[0]; if (def) setForm(f => ({ ...f, model: def.id })); } }); }, []); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); const ACTIVE = ["initiated", "ringing", "answered", "in_progress"]; const isActive = live && ACTIVE.includes(live.call?.status); // Poll one call while it's active. const startPolling = React.useCallback((uuid) => { clearInterval(pollRef.current); const tick = async () => { const r = await VoaisAPI.get(`/api/calls/live/${uuid}`); if (r.ok && r.data?.ok) { setLive(r.data); if (!ACTIVE.includes(r.data.call?.status)) clearInterval(pollRef.current); } }; tick(); pollRef.current = setInterval(tick, 1500); }, []); React.useEffect(() => () => clearInterval(pollRef.current), []); React.useEffect(() => { if (transcriptEndRef.current) transcriptEndRef.current.scrollIntoView({ behavior: "smooth" }); }, [live?.transcript?.length]); const dial = async () => { setErr(null); const number = form.number.trim(); if (!/^[0-9+][0-9\s-]{5,}$/.test(number)) { setErr("Enter a valid phone number, e.g. 9399000000."); return; } if (!form.model) { setErr("Pick an AI model."); return; } setDialing(true); setLive(null); const r = await VoaisAPI.post("/api/calls/dial", { number, mode: "ai", model: form.model, callCfg: { systemPrompt: form.systemPrompt, greeting: form.greeting, voice: form.voice || undefined, }, }); setDialing(false); if (r.ok && r.data?.ok) { setCall({ uuid: r.data.callUuid, code: r.data.code }); startPolling(r.data.callUuid); } else { setErr(r.data?.msg || "Dial failed."); } }; const hangup = async () => { if (!call?.uuid) return; await VoaisAPI.post(`/api/calls/hangup/${call.uuid}`); // one more poll to capture the final state setTimeout(() => { if (call?.uuid) VoaisAPI.get(`/api/calls/live/${call.uuid}`).then(r => r.ok && r.data?.ok && setLive(r.data)); }, 800); }; const reset = () => { clearInterval(pollRef.current); setCall(null); setLive(null); setErr(null); }; const statusTone = (s) => s === "in_progress" || s === "answered" ? "green" : s === "ringing" || s === "initiated" ? "yellow" : s === "completed" ? "blue" : s === "failed" ? "red" : "gray"; const selectedModel = models.find(m => m.id === form.model); const voiceList = selectedModel ? (voices[selectedModel.provider] || []) : []; return (
{/* ── Left: dial form ─────────────────────────────────────────────── */}
set("number", e.target.value)} disabled={isActive} style={{ fontFamily: "var(--font-mono)", fontSize: 16 }} onKeyDown={e => { if (e.key === "Enter" && !isActive) dial(); }}/> {selectedModel && !selectedModel.available && (
No API key for {selectedModel.provider} — the call will run in echo mode (you'll hear yourself) until a key is set on the server.
)} {voiceList.length > 0 && ( )} set("greeting", e.target.value)} disabled={isActive}/>