/* global React */
// triage-chat.jsx — React chat component for the CentralReach triage demo.
//
// Mounts to #triage-chat-root in chat.html.
// Talks to /api/triage-chat which runs an Anthropic tool-use loop.
// Visible tool-call badges so interviewer can see which tools the bot chose.
const { useState, useRef, useEffect } = React;
const STARTERS = [
"What deals are at risk this week?",
"Tell me about Acme ABA Clinic",
"Run a triage on Beacon Behavioral Health",
"Show me the dashboard",
];
const FALLBACKS = {
default: "Live mode's offline right now. The 3 working demos (CLI, HTTP API, Salesforce LWC) are documented at github.com/mikecutillo/centralreach-bot-demo.",
risk: "Without a live LLM, I can't dynamically triage. The static dashboard at /dashboard.html shows the pre-computed at-risk opps across 30 synthetic ABA-clinic accounts.",
account: "I can't fetch account data right now. The fixtures live in tests/fixtures.py on GitHub — the 5 hand-crafted patterns are Acme (at-risk renewal), Beacon (healthy upgrade), Cedar (active negotiation), Foothills (stale), Daybreak (mixed).",
dashboard: "Dashboard at /dashboard.html — 30 accounts, revenue-at-risk by industry, risk-level × stage heatmap, top-10 actionable list. Same data the triage bot generated.",
};
function pickFallback(text) {
const t = text.toLowerCase();
if (t.includes("risk") || t.includes("deal") || t.includes("opp") || t.includes("churn")) return FALLBACKS.risk;
if (t.includes("account") || t.includes("acme") || t.includes("beacon") || t.includes("cedar") || t.includes("foothills") || t.includes("daybreak")) return FALLBACKS.account;
if (t.includes("dashboard") || t.includes("visual") || t.includes("chart") || t.includes("tableau")) return FALLBACKS.dashboard;
return FALLBACKS.default;
}
function ToolBadge({ name }) {
const label = ({
list_at_risk_opps: "list_at_risk_opps",
read_account_graph: "read_account_graph",
run_triage: "run_triage",
show_dashboard: "show_dashboard",
}[name]) || name;
return (
tool:{label}
);
}
function ChatMessage({ role, text, pending, toolCalls }) {
const isBot = role === "bot";
return (
{isBot && (
CR
)}
{toolCalls && toolCalls.length > 0 && (
{toolCalls.map((tc, i) => )}
)}
{pending ? (
●{" "}
●{" "}
●
) : text}
);
}
window.TriageChat = function TriageChat() {
const [messages, setMessages] = useState([
{
role: "bot",
text: "I'm the conversational layer over the CentralReach triage demo. Ask me about at-risk deals, dig into a specific account, or jump to the dashboard view. Same bot that powers the CLI, HTTP API, and Salesforce LWC — just with tool-use so I can route your questions.",
},
]);
const [input, setInput] = useState("");
const [busy, setBusy] = useState(false);
const [usedLive, setUsedLive] = useState(null);
const scrollRef = useRef(null);
useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages]);
async function send(text) {
if (!text.trim() || busy) return;
const userMsg = { role: "user", text };
setMessages((m) => [...m, userMsg, { role: "bot", text: "", pending: true }]);
setInput("");
setBusy(true);
const history = [...messages, userMsg]
.filter((m) => !m.pending)
.map((m) => ({ role: m.role === "user" ? "user" : "assistant", content: m.text }));
let reply = null;
let toolCalls = [];
let live = false;
try {
const res = await Promise.race([
fetch("/api/triage-chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ messages: history }),
}),
new Promise((_, rej) => setTimeout(() => rej(new Error("timeout")), 30000)),
]);
if (res && res.ok) {
const data = await res.json();
if (data && typeof data.reply === "string" && data.reply.trim().length > 0) {
reply = data.reply.trim();
toolCalls = data.tool_calls || [];
live = true;
}
}
} catch (e) {}
if (!reply) {
reply = pickFallback(text);
live = false;
}
setUsedLive(live);
setMessages((m) => {
const next = m.slice(0, -1);
next.push({ role: "bot", text: reply, toolCalls });
return next;
});
setBusy(false);
}
return (