No agents yet

Agents are the AI personas that handle your calls. Create your first one — give it a name, a role, and a voice — and you'll be ready to launch campaigns.

} onClick={() => setShow(true)}>Create your first agent

)} {/* Grid */} {agents && agents.length > 0 && (

{agents.map((a) => ( ))}

)} {showCreate && setShow(false)} onCreated={() => { setShow(false); load(); }}/>}

); } // ── Agent card ────────────────────────────────────────────────────────── function AgentCard({ agent, onStatusChange, onDelete }) { const grad = agent.avatar_gradient || "linear-gradient(135deg,#5B8FFF,#00D49F)"; const statusTone = agent.status === "active" ? "green" : agent.status === "draft" ? "gray" : "yellow"; return ( {/* Coloured header */}

{(agent.name || "?").charAt(0).toUpperCase()}

{agent.status}

{agent.name}

· {agent.code}

{agent.role || "—"}

{agent.language || "—"} {agent.llm_provider} · {agent.llm_model}

Calls handled

{Number(agent.total_calls || 0).toLocaleString("en-IN")}

Success rate

{agent.success_rate ? `${Number(agent.success_rate)}%` : "—"}

{agent.status === "draft" && ( onStatusChange(agent.id, "active")}>Activate )} {agent.status === "active" && ( onStatusChange(agent.id, "archived")}>Archive )} {agent.status === "archived" && ( onStatusChange(agent.id, "active")}>Restore )} onDelete(agent.id)} title="Delete">

); } // ── Create agent modal ────────────────────────────────────────────────── function CreateAgentModal({ onClose, onCreated }) { const [form, setForm] = React.useState({ name: "", role: "", description: "", language: "hinglish", llm_provider: "gemini", llm_model: "gemini-1.5-pro", system_prompt: "", opening_script: "", }); const [submitting, setSubmitting] = React.useState(false); const [err, setErr] = React.useState(null); const submit = async (e) => { e.preventDefault(); setErr(null); if (!form.name.trim()) return setErr("Name is required."); setSubmitting(true); const r = await VoaisAPI.post("/api/agents", form); setSubmitting(false); if (r.ok) onCreated(); else setErr(r.data?.msg || "Failed to create agent."); }; return (

{err &&

{err}

} setForm({ ...form, name: e.target.value })}/> setForm({ ...form, role: e.target.value })}/>

setForm({ ...form, description: e.target.value })}/>
        </Field>

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Language">
            <select className="select" value={form.language} onChange={(e) => setForm({ ...form, language: e.target.value })}>
              <option value="hinglish">Hinglish</option>
              <option value="hindi">Hindi</option>
              <option value="english">English</option>
            </select>
          </Field>
          <Field label="LLM provider">
            <select className="select" value={form.llm_provider} onChange={(e) => setForm({ ...form, llm_provider: e.target.value })}>
              <option value="gemini">Gemini</option>
              <option value="openai">OpenAI</option>
              <option value="anthropic">Anthropic</option>
            </select>
          </Field>
        </div>

<Field label="System prompt" hint="The base instructions your agent follows on every call.">
          <textarea className="textarea" rows={3} placeholder="You are Priya, a friendly sales agent for Mercedes-Benz Lucknow…" value={form.system_prompt} onChange={(e) => setForm({ ...form, system_prompt: e.target.value })}/>
        </Field>

<Field label="Opening script" hint="The first sentence your agent says when the call connects.">
          <textarea className="textarea" rows={2} placeholder="Namaste! Main Priya bol rahi hoon Mercedes-Benz Lucknow se…" value={form.opening_script} onChange={(e) => setForm({ ...form, opening_script: e.target.value })}/>
        </Field>

<div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 6 }}>
          <Btn kind="ghost"   onClick={onClose} type="button">Cancel</Btn>
          <Btn kind="primary" type="submit" disabled={submitting}>
            {submitting ? "Creating…" : "Create agent"}
          </Btn>
        </div>
      </form>
    </Modal>
  );
}

// ── Modal primitive ─────────────────────────────────────────────────────
function Modal({ title, onClose, children, width = 520 }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);
  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target.classList.contains("modal-backdrop")) onClose(); }}>
      <div className="modal-card" style={{ maxWidth: width }}>
        <div className="modal-head">
          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>{title}</h2>
          <button className="topbar-icon-btn" onClick={onClose} title="Close"><I.x size={14}/></button>
        </div>
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
}

window.AgentsScreen = AgentsScreen;
window.Modal        = Modal;     // re-export for campaigns + contacts screens