140 lines
4.8 KiB
JavaScript
140 lines
4.8 KiB
JavaScript
import { useEffect, useMemo, useState } from "react";
|
|
import { callSkill, loadAgentConfig, loadSession } from "./a2a.js";
|
|
|
|
const SAMPLE_EMAIL = {
|
|
sender_email: "Customer Example <customer@example.com>",
|
|
subject: "Refund request for pi_test123",
|
|
body: "Please refund 25.00 USD for payment pi_test123.",
|
|
message_id: "<sample-support-email@example.com>",
|
|
stripe_payment_intent_id: "pi_test123",
|
|
requested_refund_amount_cents: 2500,
|
|
currency: "usd",
|
|
customer_name: "Customer",
|
|
};
|
|
|
|
export function App() {
|
|
const [config, setConfig] = useState(null);
|
|
const [session, setSession] = useState(null);
|
|
const [selectedSkillName, setSelectedSkillName] = useState("process_support_email");
|
|
const [argsText, setArgsText] = useState(JSON.stringify(SAMPLE_EMAIL, null, 2));
|
|
const [result, setResult] = useState(null);
|
|
const [error, setError] = useState(null);
|
|
const [running, setRunning] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadAgentConfig()
|
|
.then((data) => {
|
|
setConfig(data);
|
|
return loadSession(data).catch(() => null);
|
|
})
|
|
.then((sessionData) => setSession(sessionData))
|
|
.catch((err) => setError(err.message || String(err)));
|
|
}, []);
|
|
|
|
const selectedSkill = useMemo(
|
|
() => config?.skills?.find((skill) => skill.name === selectedSkillName),
|
|
[config, selectedSkillName],
|
|
);
|
|
|
|
function selectSkill(name) {
|
|
setSelectedSkillName(name);
|
|
setResult(null);
|
|
setError(null);
|
|
if (name === "process_support_email") setArgsText(JSON.stringify(SAMPLE_EMAIL, null, 2));
|
|
if (name === "execute_approved_refund") {
|
|
setArgsText(JSON.stringify({
|
|
action_digest: "paste_action_digest_from_preview",
|
|
approval_token: "APPROVE-REFUND-first16digest",
|
|
stripe_payment_intent_id: "pi_test123",
|
|
amount_cents: 2500,
|
|
currency: "usd",
|
|
customer_email: "customer@example.com",
|
|
reason: "requested_by_customer",
|
|
}, null, 2));
|
|
}
|
|
}
|
|
|
|
async function runSkill(event) {
|
|
event.preventDefault();
|
|
if (!config || !selectedSkill) return;
|
|
setRunning(true);
|
|
setError(null);
|
|
setResult(null);
|
|
try {
|
|
const args = JSON.parse(argsText || "{}");
|
|
const data = await callSkill(config, selectedSkill.name, args);
|
|
setResult(data);
|
|
} catch (err) {
|
|
setError(err.message || String(err));
|
|
} finally {
|
|
setRunning(false);
|
|
}
|
|
}
|
|
|
|
if (!config) {
|
|
return <main className="loading"><p>{error || "Loading support refund agent..."}</p></main>;
|
|
}
|
|
|
|
const skills = config.skills || [];
|
|
|
|
return (
|
|
<main className="app-shell">
|
|
<aside className="sidebar">
|
|
<div>
|
|
<p className="eyebrow">Support refund workflow</p>
|
|
<h1>Refund approval card</h1>
|
|
<p className="agent-meta">{config.agent.name} v{config.agent.version}</p>
|
|
</div>
|
|
|
|
<div className="panel compact">
|
|
<h3>Safety model</h3>
|
|
<p>Inbound email can only create a proposal and draft. Stripe refunds require a separate approval token bound to the action digest.</p>
|
|
</div>
|
|
|
|
<nav className="skill-list" aria-label="Agent skills">
|
|
{skills.map((skill) => (
|
|
<button className={skill.name === selectedSkillName ? "skill active" : "skill"} key={skill.name} onClick={() => selectSkill(skill.name)} type="button">
|
|
<span>{skill.name}</span>
|
|
<small>{skill.tags?.includes("a2a:email-handler") ? "email" : "tool"}</small>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="session">
|
|
<span>{session?.authenticated ? "Signed in" : "Local session"}</span>
|
|
<strong>{session?.user?.email || session?.org?.slug || "dev@example.local"}</strong>
|
|
</div>
|
|
</aside>
|
|
|
|
<section className="workbench">
|
|
<header className="toolbar">
|
|
<div>
|
|
<p className="eyebrow">Chat-style runner</p>
|
|
<h2>{selectedSkill?.name || "No skills found"}</h2>
|
|
</div>
|
|
<a href={config.docs.base} rel="noreferrer" target="_blank">Docs</a>
|
|
</header>
|
|
|
|
<form className="runner" onSubmit={runSkill}>
|
|
<label>
|
|
Message / approval JSON
|
|
<textarea spellCheck="false" value={argsText} onChange={(event) => setArgsText(event.target.value)} />
|
|
</label>
|
|
<button disabled={running || !selectedSkill} type="submit">{running ? "Running..." : "Send to agent"}</button>
|
|
</form>
|
|
|
|
<section className="panels">
|
|
<div className="panel">
|
|
<h3>Agent reply</h3>
|
|
<pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
|
|
</div>
|
|
<div className="panel">
|
|
<h3>Published input schema</h3>
|
|
<pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|