File size: 2,867 Bytes
4c86404 3fe7458 4c86404 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | // frontend/src/components/admin/AdminAIAssistant.jsx
import React, { useState } from "react";
import api from "../../api/client";
export default function AdminAIAssistant({ open, onClose, memberships }) {
const [message, setMessage] = useState("");
const [answer, setAnswer] = useState("");
const [loading, setLoading] = useState(false);
if (!open) return null;
async function handleAsk(e) {
e.preventDefault();
if (!message.trim()) return;
setLoading(true);
setAnswer("");
try {
const res = await api.post("/ai/admin", {
question: message,
membership_count: memberships.length,
});
setAnswer(res.data?.answer || "AI assistant responded.");
} catch (err) {
setAnswer("Sorry, the AI assistant is not available right now.");
} finally {
setLoading(false);
}
}
return (
<div className="fixed inset-0 z-40 flex items-end sm:items-center justify-center bg-black/30">
<div className="w-full max-w-lg bg-white rounded-t-2xl sm:rounded-2xl shadow-xl border border-stone-200 p-4 sm:p-5">
<div className="flex items-center justify-between mb-3">
<div>
<h2 className="text-sm font-semibold text-stone-900">
Admin AI assistant
</h2>
<p className="text-xs text-stone-500">
Ask about renewals, churn risk, and membership health.
</p>
</div>
<button
type="button"
onClick={onClose}
className="text-xs text-stone-500 hover:text-stone-800"
>
Close
</button>
</div>
<form onSubmit={handleAsk} className="space-y-3">
<textarea
className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 min-h-[70px]"
placeholder="e.g., Which members are most at risk of churning this month?"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<div className="flex items-center justify-between gap-3">
<div className="text-[11px] text-stone-400">
This calls the <code>/api/ai/admin</code> endpoint.
</div>
<button
type="submit"
disabled={loading}
className="px-3 py-1.5 rounded-lg bg-purple-600 text-white text-xs font-medium hover:bg-purple-700 disabled:opacity-60"
>
{loading ? "Thinking…" : "Ask AI"}
</button>
</div>
</form>
{answer && (
<div className="mt-3 rounded-lg bg-stone-50 border border-stone-200 px-3 py-2 text-sm text-stone-800 whitespace-pre-wrap">
{answer}
</div>
)}
</div>
</div>
);
}
|